@extends('layouts.app')

@section('title', 'Buat Estimasi Harga')

@section('breadcrumb')
    <a href="{{ route('estimasi.index') }}">Estimasi Harga</a>
    <i class="bi bi-chevron-right"></i>
    <span>Buat Estimasi</span>
@endsection

@section('content')

<div class="pf-page-header">
    <div>
        <h1 class="pf-page-title"><i class="bi bi-calculator-fill me-2 text-primary-pf"></i>Kalkulator Estimasi Harga Cetak</h1>
        <p class="pf-page-subtitle">Kalkulasi HPP otomatis berdasarkan spesifikasi pekerjaan cetak</p>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-outline-secondary" onclick="resetForm()">
            <i class="bi bi-arrow-counterclockwise"></i> Reset
        </button>
        <button class="btn btn-primary" onclick="saveEstimasi()">
            <i class="bi bi-save2-fill"></i> Simpan Estimasi
        </button>
    </div>
</div>

<form id="formEstimasi" action="{{ route('estimasi.store') }}" method="POST">
@csrf

<div class="row g-4">

    {{-- ===== KOLOM KIRI ===== --}}
    <div class="col-12 col-xl-7">

        {{-- Info Pekerjaan --}}
        <div class="pf-card mb-4">
            <div class="pf-card-header">
                <h6 class="pf-card-title"><i class="bi bi-info-circle-fill"></i> Informasi Pekerjaan</h6>
                <span class="pf-status pf-status-draft">Draft</span>
            </div>
            <div class="pf-card-body">
                <div class="row g-3">
                    <div class="col-12 col-md-6">
                        <label class="form-label">Nama Pelanggan <span class="text-danger">*</span></label>
                        <select class="form-select" id="pelangganId" name="pelanggan_id" required>
                            <option value="">— Pilih Pelanggan —</option>
                            @foreach($pelanggan ?? [] as $p)
                                <option value="{{ $p->id }}">{{ $p->nama }}</option>
                            @endforeach
                            <option value="new">+ Tambah Pelanggan Baru</option>
                        </select>
                    </div>
                    <div class="col-12 col-md-6">
                        <label class="form-label">Nama Pekerjaan / Produk <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="nama_pekerjaan"
                               placeholder="cth: Brosur A4 Full Color 2024" required>
                    </div>
                    <div class="col-12 col-md-6">
                        <label class="form-label">Jenis Produk <span class="text-danger">*</span></label>
                        <select class="form-select" id="jenisProduk" name="jenis_produk" required onchange="updateJenisProduk()">
                            <option value="">— Pilih Jenis —</option>
                            <option value="brosur">Brosur / Leaflet</option>
                            <option value="kartu_nama">Kartu Nama</option>
                            <option value="kalender">Kalender</option>
                            <option value="buku">Buku / Majalah</option>
                            <option value="kop_surat">Kop Surat / Amplop</option>
                            <option value="spanduk">Spanduk / Banner</option>
                            <option value="nota">Nota / Form NCR</option>
                            <option value="poster">Poster</option>
                            <option value="stiker">Stiker / Label</option>
                            <option value="lain">Lainnya</option>
                        </select>
                    </div>
                    <div class="col-12 col-md-6">
                        <label class="form-label">Tanggal Estimasi</label>
                        <input type="date" class="form-control" name="tgl_estimasi"
                               value="{{ date('Y-m-d') }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Keterangan Tambahan</label>
                        <textarea class="form-control" name="keterangan" rows="2"
                                  placeholder="Instruksi khusus, referensi warna, dll..."></textarea>
                    </div>
                </div>
            </div>
        </div>

        {{-- Spesifikasi Cetak --}}
        <div class="pf-card mb-4">
            <div class="pf-card-header">
                <h6 class="pf-card-title"><i class="bi bi-sliders2-vertical"></i> Spesifikasi Cetak</h6>
            </div>
            <div class="pf-card-body">
                <div class="row g-3">

                    {{-- Ukuran --}}
                    <div class="col-12 col-md-4">
                        <label class="form-label">Ukuran Jadi <span class="text-danger">*</span></label>
                        <select class="form-select" id="ukuranJadi" name="ukuran_jadi" onchange="updateUkuran()">
                            <option value="A4">A4 (21 × 29.7 cm)</option>
                            <option value="A5">A5 (14.8 × 21 cm)</option>
                            <option value="A3">A3 (29.7 × 42 cm)</option>
                            <option value="F4">F4 (21.5 × 33 cm)</option>
                            <option value="custom">Custom</option>
                        </select>
                    </div>
                    <div class="col-6 col-md-4" id="customUkuranW" style="display:none">
                        <label class="form-label">Lebar (cm)</label>
                        <input type="number" class="form-control" id="lebarCm" name="lebar_cm"
                               step="0.1" min="1" placeholder="21" onchange="hitung()">
                    </div>
                    <div class="col-6 col-md-4" id="customUkuranH" style="display:none">
                        <label class="form-label">Tinggi (cm)</label>
                        <input type="number" class="form-control" id="tinggiCm" name="tinggi_cm"
                               step="0.1" min="1" placeholder="29.7" onchange="hitung()">
                    </div>

                    {{-- Oplah --}}
                    <div class="col-12 col-md-4">
                        <label class="form-label">Oplah / Jumlah Cetak <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="oplah" name="oplah"
                                   value="1000" min="1" step="100" onchange="hitung()" required>
                            <span class="input-group-text">lembar</span>
                        </div>
                    </div>

                    {{-- Halaman --}}
                    <div class="col-12 col-md-4">
                        <label class="form-label">Jumlah Halaman</label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="jumlahHal" name="jumlah_halaman"
                                   value="1" min="1" onchange="hitung()">
                            <span class="input-group-text">hal</span>
                        </div>
                    </div>

                    {{-- Warna --}}
                    <div class="col-12 col-md-4">
                        <label class="form-label">Mode Warna <span class="text-danger">*</span></label>
                        <select class="form-select" id="modeWarna" name="mode_warna" onchange="hitung()">
                            <option value="4_0">4/0 — Full Color 1 Muka</option>
                            <option value="4_4">4/4 — Full Color 2 Muka</option>
                            <option value="1_0">1/0 — Hitam Putih 1 Muka</option>
                            <option value="1_1">1/1 — Hitam Putih 2 Muka</option>
                            <option value="2_0">2/0 — Spot Color 2 Warna</option>
                        </select>
                    </div>

                    {{-- Kertas --}}
                    <div class="col-12 col-md-6">
                        <label class="form-label">Jenis Kertas <span class="text-danger">*</span></label>
                        <select class="form-select" id="jenisKertas" name="jenis_kertas" onchange="hitung()">
                            <optgroup label="Art Paper">
                                <option value="AP100" data-gram="100" data-harga="85000">Art Paper 100 gsm</option>
                                <option value="AP120" data-gram="120" data-harga="98000">Art Paper 120 gsm</option>
                                <option value="AP150" data-gram="150" data-harga="115000">Art Paper 150 gsm</option>
                                <option value="AP210" data-gram="210" data-harga="148000">Art Paper 210 gsm</option>
                                <option value="AP260" data-gram="260" data-harga="185000">Art Paper 260 gsm</option>
                            </optgroup>
                            <optgroup label="Art Carton">
                                <option value="AC230" data-gram="230" data-harga="165000">Art Carton 230 gsm</option>
                                <option value="AC310" data-gram="310" data-harga="215000">Art Carton 310 gsm</option>
                                <option value="AC400" data-gram="400" data-harga="265000">Art Carton 400 gsm</option>
                            </optgroup>
                            <optgroup label="HVS">
                                <option value="HVS60" data-gram="60" data-harga="55000">HVS 60 gsm</option>
                                <option value="HVS70" data-gram="70" data-harga="62000">HVS 70 gsm</option>
                                <option value="HVS80" data-gram="80" data-harga="68000">HVS 80 gsm</option>
                            </optgroup>
                            <optgroup label="Ivory">
                                <option value="IVR210" data-gram="210" data-harga="158000">Ivory 210 gsm</option>
                                <option value="IVR230" data-gram="230" data-harga="175000">Ivory 230 gsm</option>
                                <option value="IVR310" data-gram="310" data-harga="225000">Ivory 310 gsm</option>
                            </optgroup>
                            <optgroup label="Duplex">
                                <option value="DPX250" data-gram="250" data-harga="88000">Duplex 250 gsm</option>
                                <option value="DPX300" data-gram="300" data-harga="105000">Duplex 300 gsm</option>
                            </optgroup>
                        </select>
                    </div>
                    <div class="col-12 col-md-6">
                        <label class="form-label">Ukuran Kertas Cetak</label>
                        <select class="form-select" id="ukuranKertas" name="ukuran_kertas" onchange="hitung()">
                            <option value="65x100" data-l="65" data-t="100">Plano 65 × 100 cm</option>
                            <option value="79x109" data-l="79" data-t="109">Plano 79 × 109 cm</option>
                            <option value="61x86" data-l="61" data-t="86">Plano 61 × 86 cm</option>
                        </select>
                    </div>

                </div>
            </div>
        </div>

        {{-- Finishing --}}
        <div class="pf-card mb-4">
            <div class="pf-card-header">
                <h6 class="pf-card-title"><i class="bi bi-stars"></i> Finishing</h6>
                <small class="text-muted">Centang yang diperlukan</small>
            </div>
            <div class="pf-card-body">
                <div class="row g-2">
                    @php
                    $finishing = [
                        ['id'=>'laminasi_doff', 'label'=>'Laminasi Doff', 'harga'=>'12.000/m²'],
                        ['id'=>'laminasi_glossy','label'=>'Laminasi Glossy','harga'=>'11.000/m²'],
                        ['id'=>'uv_varnish',    'label'=>'UV Varnish',    'harga'=>'15.000/m²'],
                        ['id'=>'spot_uv',       'label'=>'Spot UV',       'harga'=>'20.000/m²'],
                        ['id'=>'emboss',        'label'=>'Emboss / Deboss','harga'=>'25.000/m²'],
                        ['id'=>'foil_gold',     'label'=>'Hot Foil Gold', 'harga'=>'30.000/m²'],
                        ['id'=>'cutting_die',   'label'=>'Die Cutting',   'harga'=>'18.000/m²'],
                        ['id'=>'lipat',         'label'=>'Lipat',         'harga'=>'3.000/rim'],
                        ['id'=>'jilid_kawat',   'label'=>'Jilid Kawat',   'harga'=>'5.000/buku'],
                        ['id'=>'jilid_perfect', 'label'=>'Perfect Binding','harga'=>'8.000/buku'],
                        ['id'=>'potong',        'label'=>'Potong / Stek', 'harga'=>'2.500/rim'],
                        ['id'=>'perforasi',     'label'=>'Perforasi',     'harga'=>'6.000/rim'],
                    ];
                    @endphp
                    @foreach($finishing as $f)
                    <div class="col-12 col-sm-6 col-md-4">
                        <div class="pf-finishing-item" id="wrap-{{ $f['id'] }}">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox"
                                       id="{{ $f['id'] }}" name="finishing[]"
                                       value="{{ $f['id'] }}" onchange="hitung()">
                                <label class="form-check-label" for="{{ $f['id'] }}">
                                    <span>{{ $f['label'] }}</span>
                                    <small class="d-block text-muted font-mono" style="font-size:11px">{{ $f['harga'] }}</small>
                                </label>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Biaya Tambahan --}}
        <div class="pf-card">
            <div class="pf-card-header">
                <h6 class="pf-card-title"><i class="bi bi-plus-circle-fill"></i> Biaya Tambahan</h6>
                <button type="button" class="btn btn-sm btn-outline-primary" onclick="tambahBiaya()">
                    <i class="bi bi-plus"></i> Tambah Baris
                </button>
            </div>
            <div class="pf-card-body p-0">
                <table class="table mb-0" id="tblBiayaTambahan">
                    <thead>
                        <tr>
                            <th>Keterangan</th>
                            <th style="width:160px">Jumlah (Rp)</th>
                            <th style="width:40px"></th>
                        </tr>
                    </thead>
                    <tbody id="biayaTambahanBody">
                        <tr id="biaya-row-1">
                            <td><input type="text" class="form-control form-control-sm" name="biaya_label[]" placeholder="cth: Ongkos Desain"></td>
                            <td><input type="number" class="form-control form-control-sm font-mono" name="biaya_nominal[]" placeholder="0" onchange="hitung()"></td>
                            <td>
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="hapusBiaya('biaya-row-1')">
                                    <i class="bi bi-x"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    {{-- ===== KOLOM KANAN — HASIL KALKULASI ===== --}}
    <div class="col-12 col-xl-5">

        {{-- Sticky Result Panel --}}
        <div style="position: sticky; top: calc(var(--pf-topbar-h) + 16px);">

            {{-- Ringkasan Kalkulasi --}}
            <div class="pf-card mb-3">
                <div class="pf-card-header" style="background:var(--pf-primary);border-radius:calc(var(--pf-radius-lg) - 1px) calc(var(--pf-radius-lg) - 1px) 0 0">
                    <h6 class="pf-card-title" style="color:#fff">
                        <i class="bi bi-receipt-cutoff"></i> Hasil Kalkulasi HPP
                    </h6>
                    <span id="calcStatus" style="font-size:11.5px;color:rgba(255,255,255,.7)">Otomatis</span>
                </div>
                <div class="pf-card-body" style="padding:0">

                    {{-- Summary Lines --}}
                    <div id="summaryLines" style="padding:4px 0">
                        <!-- Diisi oleh JS -->
                    </div>

                    {{-- Subtotal --}}
                    <div style="padding:14px 20px;background:var(--pf-bg);border-top:1px solid var(--pf-border)">
                        <div class="d-flex justify-content-between mb-2">
                            <span style="font-size:13px;color:var(--pf-text-muted)">HPP Total</span>
                            <span id="resHPP" class="font-mono fw-600">Rp 0</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span style="font-size:13px;color:var(--pf-text-muted)">HPP per Lembar</span>
                            <span id="resHPPLembar" class="font-mono fw-600" style="font-size:13px">Rp 0</span>
                        </div>

                        {{-- Margin --}}
                        <div class="d-flex align-items-center gap-2 mb-2 mt-3">
                            <label style="font-size:13px;white-space:nowrap;color:var(--pf-text-muted)">Margin Keuntungan</label>
                            <input type="range" id="sliderMargin" name="margin_pct" min="5" max="60" value="25"
                                   style="flex:1" oninput="updateMargin(this.value)">
                            <span id="valMargin" class="font-mono" style="font-size:13px;font-weight:600;color:var(--pf-primary);min-width:36px;text-align:right">25%</span>
                        </div>

                        {{-- Diskon --}}
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <label style="font-size:13px;white-space:nowrap;color:var(--pf-text-muted)">Diskon</label>
                            <input type="number" id="inputDiskon" name="diskon_pct" class="form-control form-control-sm"
                                   value="0" min="0" max="100" step="1" style="width:70px;font-family:var(--pf-font-mono)"
                                   oninput="hitung()">
                            <span style="font-size:13px;color:var(--pf-text-muted)">%</span>
                        </div>

                        <div class="pf-divider" style="margin:10px 0"></div>

                        <div class="d-flex justify-content-between mb-1">
                            <span style="font-size:13px;color:var(--pf-text-muted)">Harga Jual (sebelum diskon)</span>
                            <span id="resHargaJual" class="font-mono" style="font-size:13px">Rp 0</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <span style="font-size:13px;color:var(--pf-text-muted)">Nilai Diskon</span>
                            <span id="resDiskon" class="font-mono text-danger" style="font-size:13px">- Rp 0</span>
                        </div>
                    </div>

                    {{-- Grand Total --}}
                    <div style="padding:18px 20px;background:linear-gradient(135deg,rgba(27,79,216,.08),rgba(27,79,216,.03))">
                        <div class="d-flex justify-content-between align-items-baseline">
                            <span style="font-size:13px;font-weight:600;color:var(--pf-text-muted)">TOTAL HARGA JUAL</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-baseline mt-1">
                            <span id="resTotal" style="font-size:26px;font-weight:700;color:var(--pf-primary);font-family:var(--pf-font-mono);letter-spacing:-1px">
                                Rp 0
                            </span>
                            <span id="resTotalPerLbr" style="font-size:12px;color:var(--pf-text-muted)">Rp 0/lbr</span>
                        </div>
                        <div class="mt-1">
                            <span id="resProfitInfo" style="font-size:12px;color:var(--pf-success)"></span>
                        </div>
                    </div>

                </div>
            </div>

            {{-- Input Harga Manual --}}
            <div class="pf-card mb-3">
                <div class="pf-card-header">
                    <h6 class="pf-card-title"><i class="bi bi-pencil-square"></i> Override Harga Jual</h6>
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" id="chkOverride" onchange="toggleOverride()">
                        <label class="form-check-label" for="chkOverride" style="font-size:12px">Manual</label>
                    </div>
                </div>
                <div class="pf-card-body" id="overridePanel" style="display:none">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Harga Jual Manual (Rp)</label>
                            <div class="input-group">
                                <span class="input-group-text">Rp</span>
                                <input type="number" class="form-control font-mono" id="hargaManual"
                                       name="harga_manual" placeholder="0" onchange="hitungManual()">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="alert alert-info p-2 mb-0" id="alertMarginManual" style="font-size:12px;display:none">
                                <i class="bi bi-info-circle me-1"></i>
                                <span id="infoMarginManual"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Perbandingan Oplah --}}
            <div class="pf-card mb-3">
                <div class="pf-card-header">
                    <h6 class="pf-card-title"><i class="bi bi-table"></i> Perbandingan Multi Oplah</h6>
                </div>
                <div class="pf-card-body p-0">
                    <table class="table table-sm mb-0" id="tblMultiOplah">
                        <thead>
                            <tr>
                                <th>Oplah</th>
                                <th>HPP/Lbr</th>
                                <th>Harga Jual</th>
                                <th>Margin</th>
                            </tr>
                        </thead>
                        <tbody id="bodyMultiOplah">
                            <tr><td colspan="4" class="text-center text-muted py-3">Isi form untuk melihat perbandingan</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Action Buttons --}}
            <div class="d-grid gap-2">
                <button type="button" class="btn btn-primary" onclick="saveEstimasi()">
                    <i class="bi bi-save2-fill"></i> Simpan Estimasi
                </button>
                <div class="row g-2">
                    <div class="col-6">
                        <button type="button" class="btn btn-outline-secondary w-100" onclick="printEstimasi()">
                            <i class="bi bi-printer"></i> Cetak
                        </button>
                    </div>
                    <div class="col-6">
                        <button type="button" class="btn btn-outline-success w-100" onclick="toSalesOrder()">
                            <i class="bi bi-arrow-right-circle"></i> Jadikan SO
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
</form>

@endsection

@push('styles')
<style>
.pf-finishing-item {
    border: 1.5px solid var(--pf-border);
    border-radius: 8px;
    padding: 10px 12px;
    transition: all .18s ease;
    cursor: pointer;
    background: var(--pf-surface);
}
.pf-finishing-item:hover { border-color: var(--pf-primary); background: var(--pf-primary-light); }
.pf-finishing-item:has(.form-check-input:checked) {
    border-color: var(--pf-primary);
    background: var(--pf-primary-light);
    box-shadow: 0 0 0 2px rgba(27,79,216,.15);
}
.summary-line {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 9px 20px;
    font-size: 13px;
    border-bottom: 1px solid var(--pf-border);
}
.summary-line:last-child { border-bottom: none; }
.summary-line .label { color: var(--pf-text-muted); }
.summary-line .val { font-family: var(--pf-font-mono); font-weight: 500; }
.fw-600 { font-weight: 600; }
</style>
@endpush

@push('scripts')
<script>
// ─────────────────────────────────────────
// KONFIGURASI HARGA (sebaiknya dari DB/API)
// ─────────────────────────────────────────
const CFG = {
    // Biaya plat per warna (Rp)
    hargaPlat: 35000,

    // Biaya cetak per ribu lembar (per muka per warna)
    biayaCetakRibuLembar: 8500,

    // Minimum setor mesin
    minimumSetor: 150000,

    // Waste kertas (% dari kebutuhan)
    wastePct: 12,

    // Harga kertas (Rp per kg) — diambil dari option data-harga
    // Berat kertas per m² = gramatur / 1000

    // Finishing harga per m²
    finishing: {
        laminasi_doff:   { harga: 12000,  satuan: 'm2' },
        laminasi_glossy: { harga: 11000,  satuan: 'm2' },
        uv_varnish:      { harga: 15000,  satuan: 'm2' },
        spot_uv:         { harga: 20000,  satuan: 'm2' },
        emboss:          { harga: 25000,  satuan: 'm2' },
        foil_gold:       { harga: 30000,  satuan: 'm2' },
        cutting_die:     { harga: 18000,  satuan: 'm2' },
        lipat:           { harga: 3000,   satuan: 'rim' },
        jilid_kawat:     { harga: 5000,   satuan: 'buku' },
        jilid_perfect:   { harga: 8000,   satuan: 'buku' },
        potong:          { harga: 2500,   satuan: 'rim' },
        perforasi:       { harga: 6000,   satuan: 'rim' },
    },

    // Ukuran kertas plano (cm)
    ukuranKertas: {
        '65x100': { l: 65, t: 100 },
        '79x109': { l: 79, t: 109 },
        '61x86':  { l: 61, t: 86  },
    },

    // Ukuran jadi default (cm)
    ukuranJadi: {
        'A4': { l: 21,    t: 29.7 },
        'A5': { l: 14.8,  t: 21   },
        'A3': { l: 29.7,  t: 42   },
        'F4': { l: 21.5,  t: 33   },
    }
};

let biayaRowCounter = 1;

// ─── Hitung Pass per Plano ───
function hitungPassPerPlano(pPlano, lJadi, tJadi) {
    const passL = Math.floor(pPlano.l / lJadi);
    const passT = Math.floor(pPlano.t / tJadi);
    return passL * passT;
}

// ─── Hitung Jumlah Warna ───
function hitungWarna(modeWarna) {
    const map = { '4_0':4, '4_4':8, '1_0':1, '1_1':2, '2_0':2 };
    return map[modeWarna] || 4;
}

// ─── Format Rupiah ───
function fRp(n) {
    return 'Rp ' + Math.round(n).toLocaleString('id-ID');
}

// ─── FUNGSI UTAMA KALKULASI ───
function hitung() {
    // Ambil nilai form
    const oplah       = parseInt($('#oplah').val()) || 1000;
    const jumlahHal   = parseInt($('#jumlahHal').val()) || 1;
    const modeWarna   = $('#modeWarna').val() || '4_0';
    const margin      = parseInt($('#sliderMargin').val()) || 25;
    const diskon      = parseFloat($('#inputDiskon').val()) || 0;

    // Ukuran jadi
    let lJadi, tJadi;
    const ukJadi = $('#ukuranJadi').val();
    if (ukJadi === 'custom') {
        lJadi = parseFloat($('#lebarCm').val()) || 21;
        tJadi = parseFloat($('#tinggiCm').val()) || 29.7;
    } else {
        lJadi = CFG.ukuranJadi[ukJadi]?.l || 21;
        tJadi = CFG.ukuranJadi[ukJadi]?.t || 29.7;
    }

    // Kertas
    const kertasOpt   = $('#jenisKertas option:selected');
    const gramatur     = parseFloat(kertasOpt.data('gram')) || 100;
    const hargaKertasPerKg = parseFloat(kertasOpt.data('harga')) || 85000;

    // Ukuran kertas cetak (plano)
    const ukKertas = $('#ukuranKertas').val() || '65x100';
    const plano    = CFG.ukuranKertas[ukKertas];

    // ─── 1. Hitung Pass per Plano ───
    const passPerPlano = hitungPassPerPlano(plano, lJadi + 0.5, tJadi + 0.5); // +0.5 bleed
    const lembarCetakBersih = Math.ceil(oplah * jumlahHal / Math.max(passPerPlano, 1));
    const lembarWaste  = Math.ceil(lembarCetakBersih * CFG.wastePct / 100);
    const totalLembar  = lembarCetakBersih + lembarWaste;

    // ─── 2. Biaya Kertas ───
    const luasPlano_m2  = (plano.l / 100) * (plano.t / 100); // m²
    const beratPerLembar = luasPlano_m2 * (gramatur / 1000); // kg/lembar
    const totalKgKertas  = totalLembar * beratPerLembar;
    const biayaKertas    = totalKgKertas * hargaKertasPerKg;

    // ─── 3. Biaya Plat ───
    const jumlahWarna  = hitungWarna(modeWarna);
    const biayaPlat    = jumlahWarna * CFG.hargaPlat;

    // ─── 4. Biaya Cetak (Mesin) ───
    const biayaCetak = Math.max(
        (totalLembar / 1000) * CFG.biayaCetakRibuLembar * jumlahWarna,
        CFG.minimumSetor
    );

    // ─── 5. Biaya Finishing ───
    let biayaFinishing = 0;
    const luasJadi_m2 = (lJadi / 100) * (tJadi / 100);
    const totalRim = Math.ceil(oplah / 500);

    $('input[name="finishing[]"]:checked').each(function() {
        const id  = $(this).val();
        const cfg = CFG.finishing[id];
        if (!cfg) return;
        if (cfg.satuan === 'm2') {
            biayaFinishing += cfg.harga * luasJadi_m2 * oplah;
        } else if (cfg.satuan === 'rim') {
            biayaFinishing += cfg.harga * totalRim;
        } else if (cfg.satuan === 'buku') {
            biayaFinishing += cfg.harga * oplah;
        }
    });

    // ─── 6. Biaya Tambahan ───
    let biayaTambahan = 0;
    $('input[name="biaya_nominal[]"]').each(function() {
        biayaTambahan += parseFloat($(this).val()) || 0;
    });

    // ─── 7. HPP ───
    const hpp      = biayaKertas + biayaPlat + biayaCetak + biayaFinishing + biayaTambahan;
    const hppLembar = hpp / oplah;

    // ─── 8. Harga Jual & Profit ───
    const hargaJual   = hpp * (1 + margin / 100);
    const nilaiDiskon = hargaJual * (diskon / 100);
    const totalJual   = hargaJual - nilaiDiskon;
    const totalPerLbr = totalJual / oplah;
    const profit      = totalJual - hpp;

    // ─── Update UI ───
    const lines = [
        { label: `Kertas (${totalLembar.toLocaleString('id-ID')} lbr × ${fRp(beratPerLembar * hargaKertasPerKg)})`, val: biayaKertas },
        { label: `Plat Cetak (${jumlahWarna} warna)`, val: biayaPlat },
        { label: `Biaya Mesin Cetak`, val: biayaCetak },
        { label: `Finishing`, val: biayaFinishing },
        { label: `Biaya Tambahan`, val: biayaTambahan },
    ];

    let linesHtml = '';
    lines.forEach(l => {
        linesHtml += `<div class="summary-line">
            <span class="label">${l.label}</span>
            <span class="val">${fRp(l.val)}</span>
        </div>`;
    });
    $('#summaryLines').html(linesHtml);

    $('#resHPP').text(fRp(hpp));
    $('#resHPPLembar').text(fRp(hppLembar) + '/lbr');
    $('#resHargaJual').text(fRp(hargaJual));
    $('#resDiskon').text('- ' + fRp(nilaiDiskon));
    $('#resTotal').text(fRp(totalJual));
    $('#resTotalPerLbr').text(fRp(totalPerLbr) + '/lbr');

    const profitPct = ((profit / hpp) * 100).toFixed(1);
    $('#resProfitInfo').html(
        `<i class="bi bi-graph-up-arrow me-1"></i>Laba Kotor: ${fRp(profit)} (${profitPct}%)`
    );

    // ─── Multi Oplah Table ───
    const oplahOptions = [500, 1000, 2000, 3000, 5000, 10000];
    let tblHtml = '';
    oplahOptions.forEach(op => {
        const lbr  = Math.ceil(op * jumlahHal / Math.max(passPerPlano, 1));
        const wst  = Math.ceil(lbr * CFG.wastePct / 100);
        const totL = lbr + wst;
        const k    = totL * beratPerLembar * hargaKertasPerKg;
        const p    = biayaPlat;
        const c    = Math.max((totL/1000)*CFG.biayaCetakRibuLembar*jumlahWarna, CFG.minimumSetor);
        const f    = biayaFinishing > 0 ? (biayaFinishing/oplah)*op : 0;
        const hppX = (k+p+c+f) / op;
        const jualX = hppX * (1 + margin/100);
        const mgn   = ((jualX - hppX) / hppX * 100).toFixed(0);
        const isActive = op === oplah ? 'style="background:var(--pf-primary-light);font-weight:600"' : '';
        tblHtml += `<tr ${isActive}>
            <td class="font-mono">${op.toLocaleString('id-ID')}</td>
            <td class="font-mono">${fRp(hppX)}</td>
            <td class="font-mono">${fRp(jualX*op)}</td>
            <td><span class="pf-status pf-status-selesai" style="font-size:11px">${mgn}%</span></td>
        </tr>`;
    });
    $('#bodyMultiOplah').html(tblHtml);

    // Hidden inputs for form submit
    $('input[name="hpp_total"]').val(Math.round(hpp));
    $('input[name="harga_jual"]').val(Math.round(totalJual));
}

function updateMargin(v) {
    $('#valMargin').text(v + '%');
    hitung();
}

function updateUkuran() {
    const val = $('#ukuranJadi').val();
    if (val === 'custom') {
        $('#customUkuranW, #customUkuranH').show();
    } else {
        $('#customUkuranW, #customUkuranH').hide();
    }
    hitung();
}

function updateJenisProduk() { hitung(); }

function toggleOverride() {
    const on = $('#chkOverride').is(':checked');
    $('#overridePanel').toggle(on);
}

function hitungManual() {
    const hpp = parseFloat($('#resHPP').text().replace(/[^0-9]/g,'')) || 0;
    const hm  = parseFloat($('#hargaManual').val()) || 0;
    if (hm > 0 && hpp > 0) {
        const m = ((hm - hpp) / hpp * 100).toFixed(1);
        const color = m < 0 ? 'danger' : m < 10 ? 'warning' : 'info';
        $('#alertMarginManual').show();
        $('#infoMarginManual').text(`Margin: ${m}% dari HPP`);
    }
}

function tambahBiaya() {
    biayaRowCounter++;
    const id = 'biaya-row-' + biayaRowCounter;
    $('#biayaTambahanBody').append(`
        <tr id="${id}">
            <td><input type="text" class="form-control form-control-sm" name="biaya_label[]" placeholder="Keterangan biaya"></td>
            <td><input type="number" class="form-control form-control-sm font-mono" name="biaya_nominal[]" placeholder="0" onchange="hitung()"></td>
            <td><button type="button" class="btn btn-sm btn-outline-danger" onclick="hapusBiaya('${id}')"><i class="bi bi-x"></i></button></td>
        </tr>`);
}

function hapusBiaya(id) {
    $('#' + id).remove();
    hitung();
}

function saveEstimasi() {
    Swal.fire({
        title: 'Simpan Estimasi?',
        text: 'Estimasi akan disimpan dan dapat diubah menjadi Sales Order.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#1B4FD8',
        cancelButtonColor: '#6B7280',
        confirmButtonText: '<i class="bi bi-save2-fill me-1"></i> Simpan',
        cancelButtonText: 'Batal'
    }).then(r => {
        if (r.isConfirmed) {
            $('#formEstimasi').submit();
        }
    });
}

function toSalesOrder() {
    Swal.fire({
        title: 'Jadikan Sales Order?',
        text: 'Estimasi ini akan langsung diubah menjadi Sales Order.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#059669',
        confirmButtonText: '<i class="bi bi-arrow-right-circle me-1"></i> Ya, Buat SO',
        cancelButtonText: 'Batal'
    }).then(r => {
        if (r.isConfirmed) {
            $('<input>').attr({ type:'hidden', name:'to_so', value:'1' }).appendTo('#formEstimasi');
            $('#formEstimasi').submit();
        }
    });
}

function printEstimasi() {
    window.print();
}

function resetForm() {
    Swal.fire({
        title: 'Reset Form?',
        text: 'Semua data yang diisi akan dihapus.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#DC2626',
        confirmButtonText: 'Ya, Reset'
    }).then(r => {
        if (r.isConfirmed) document.getElementById('formEstimasi').reset();
    });
}

// ─── Init ───
$(document).ready(function() {
    // Tambah hidden inputs
    $('<input type="hidden" name="hpp_total">').appendTo('#formEstimasi');
    $('<input type="hidden" name="harga_jual">').appendTo('#formEstimasi');
    hitung();
});
</script>
@endpush