@extends('layouts.master')

@section('title', 'Harga Jual')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    .select2-container .select2-selection--single { height: 31px !important; border-color: #c8c8c8 !important; border-radius: 6px !important; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 29px !important; font-size: .875rem; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 29px !important; }
    .select2-dropdown { border-color: #c8c8c8 !important; border-radius: 6px !important; font-size: .875rem; }
    .select2-container--default .select2-results__option--highlighted { background-color: #7c3aed !important; }
    #tblHargaJual_wrapper .dataTables_filter input {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 10px;
    }
    #tblHargaJual_wrapper .dataTables_filter input:focus {
        border-color: #a15adf !important;
        box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important;
    }
    #tblHargaJual_wrapper .dataTables_length select {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 8px;
        min-width: 70px;
    }
    #tblHargaJual_wrapper .dataTables_filter label,
    #tblHargaJual_wrapper .dataTables_length label {
        font-size: .875rem;
        color: #6c757d;
    }
    #tblHargaJual_wrapper .dataTables_info {
        font-size: .8rem;
        color: #6c757d;
    }
    #tblHargaJual th, #tblHargaJual td { vertical-align: middle; }
    #tblRiwayat td { padding: 10px 12px; border-color: #e9ecef; vertical-align: middle; font-size: .85rem; }
    #tblRiwayat tbody tr:last-child td { border-bottom: none; }
    #tblHargaJual thead th {
        white-space: nowrap;
        border: 1px solid #f0f0f0 !important;
    }
    #tblHargaJual tbody td { border: 1px solid #f0f0f0 !important; }
    #tblHargaJual_wrapper { padding-top: 10px; }
    #tblHargaJual_wrapper .dataTables_length select {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 8px;
        min-width: 70px;
    }
    #tblHargaJual_wrapper .dataTables_length label {
        font-size: .875rem;
        color: #6c757d;
    }
    #tblHargaJual_wrapper .dataTables_info {
        font-size: .8rem;
        color: #6c757d;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">

    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">Harga Jual</p>
            <span class="fs-13 text-muted">Data Induk &rarr; Harga Jual</span>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="card-title mb-0">Daftar Harga Jual</div>
                    <div class="d-flex gap-2 flex-wrap">
                        @can('harga_jual.view')
                        <a href="{{ route('data-induk.harga-jual.export-excel') }}" class="btn btn-success btn-sm">
                            <i class="bx bx-download me-1"></i> Unduh Excel
                        </a>
                        @endcan
                        @can('harga_jual.create')
                        <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalImport">
                            <i class="bx bx-upload me-1"></i> Import
                        </button>
                        <button type="button" class="btn btn-secondary btn-sm" onclick="openTambahPerMerek()">
                            <i class="bx bx-layer-plus me-1"></i> Tambah per Merek
                        </button>
                        <button type="button" class="btn btn-primary btn-sm" onclick="openTambah()">
                            <i class="bx bx-plus me-1"></i> Tambah Harga
                        </button>
                        @endcan
                    </div>
                </div>

                {{-- Filter --}}
                <div class="card-body border-bottom pb-3 pt-3">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-4">
                            <label class="form-label mb-1 small fw-semibold">Filter Barang</label>
                            <select id="filterBarang" class="form-select form-select-sm">
                                <option value="">Semua Barang</option>
                                @foreach($barangOptions as $b)
                                <option value="{{ $b->id }}">{{ $b->kode }} — {{ $b->nama }}@if($b->merekBarang) ({{ $b->merekBarang->nama }})@endif</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Filter Merek</label>
                            <select id="filterMerek" class="form-select form-select-sm">
                                <option value="">Semua Merek</option>
                                @foreach($merekOptions as $m)
                                <option value="{{ $m->id }}">{{ $m->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label mb-1 small fw-semibold">Filter Faskes</label>
                            <select id="filterFaskes" class="form-select form-select-sm">
                                <option value="">Semua Faskes</option>
                                @foreach($faskesOptions as $f)
                                <option value="{{ $f->id }}">{{ $f->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Filter Jenis Pasien</label>
                            <select id="filterJenisPasien" class="form-select form-select-sm">
                                <option value="">Semua</option>
                                @foreach($jenisPasienOptions as $jp)
                                <option value="{{ $jp->id }}">{{ $jp->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-1">
                            <label class="form-label mb-1 small fw-semibold">&nbsp;</label>
                            <button class="btn btn-light btn-sm w-100 d-block" onclick="resetFilter()">
                                <i class="bx bx-reset me-1"></i> Reset
                            </button>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered align-middle mb-0" id="tblHargaJual" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center ps-3" style="width:45px">No</th>
                                    <th class="text-center" style="width:100px">Aksi</th>
                                    <th style="width:90px">Kode Barang</th>
                                    <th style="min-width:200px">Nama Barang / Merek</th>
                                    <th style="min-width:120px">Faskes</th>
                                    <th style="width:110px">Jenis Pasien</th>
                                    <th class="text-end" style="width:120px">Harga Jual</th>
                                    <th class="text-center" style="width:110px">Berlaku Mulai</th>
                                    <th class="text-center" style="width:210px">Status</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

{{-- Modal Tambah --}}
<div class="modal fade" id="modalTambah" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Tambah Harga Jual</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Barang <span class="text-danger">*</span></label>
                    <select id="inBarang" class="form-select form-select-sm">
                        <option value="">-- Pilih Barang --</option>
                        @foreach($barangOptions as $b)
                        <option value="{{ $b->id }}" data-merek="{{ $b->merekBarang?->nama ?? '' }}">
                            {{ $b->kode }} — {{ $b->nama }}@if($b->merekBarang) ({{ $b->merekBarang->nama }})@endif
                        </option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Faskes <span class="text-danger">*</span></label>
                    <select id="inFaskes" class="form-select form-select-sm">
                        <option value="">-- Pilih Faskes --</option>
                        @foreach($faskesOptions as $f)
                        <option value="{{ $f->id }}">{{ $f->nama }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Jenis Pasien</label>
                    <select id="inJenisPasien" class="form-select form-select-sm">
                        <option value="">-- Semua Pasien (default) --</option>
                        @foreach($jenisPasienOptions as $jp)
                        <option value="{{ $jp->id }}">{{ $jp->nama }}</option>
                        @endforeach
                    </select>
                    <div class="form-text">Kosongkan jika harga berlaku untuk semua jenis pasien.</div>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold">Harga Jual Sebelum PPN <span class="text-danger">*</span></label>
                        <input type="text" id="inHargaDisplay" class="form-control form-control-sm" placeholder="0" autocomplete="off">
                        <input type="hidden" id="inHarga">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Harga Jual Setelah PPN</label>
                        <input type="text" id="inHargaAfterDisplay" class="form-control form-control-sm" placeholder="0" autocomplete="off">
                    </div>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-12">
                        <small class="text-muted">DPP = 11/12 × Sebelum PPN · PPN 12% dari DPP · Setelah PPN = Sebelum × 1,11</small>
                    </div>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold">Berlaku Mulai <span class="text-danger">*</span></label>
                        <input type="text" id="inBerlakuDisplay" class="form-control form-control-sm" placeholder="dd-mm-yyyy" maxlength="10" autocomplete="off">
                        <input type="hidden" id="inBerlaku">
                    </div>
                </div>
                <div class="mb-1">
                    <label class="form-label fw-semibold">Catatan</label>
                    <textarea id="inCatatan" class="form-control form-control-sm" rows="2" placeholder="Opsional"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary btn-sm" onclick="simpan()">
                    <i class="bx bx-save me-1"></i> Simpan
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Edit --}}
<div class="modal fade" id="modalEdit" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Edit Harga Jual</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="editId">
                <div class="mb-2 p-2 rounded" style="background:#f8f9fa;font-size:.82rem" id="editInfo"></div>
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold">Harga Jual Sebelum PPN <span class="text-danger">*</span></label>
                        <input type="text" id="editHargaDisplay" class="form-control form-control-sm" placeholder="0" autocomplete="off">
                        <input type="hidden" id="editHarga">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Harga Jual Setelah PPN</label>
                        <input type="text" id="editHargaAfterDisplay" class="form-control form-control-sm" placeholder="0" autocomplete="off">
                    </div>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-12">
                        <small class="text-muted">DPP = 11/12 × Sebelum PPN · PPN 12% dari DPP · Setelah PPN = Sebelum × 1,11</small>
                    </div>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold">Berlaku Mulai <span class="text-danger">*</span></label>
                        <input type="text" id="editBerlakuDisplay" class="form-control form-control-sm" placeholder="dd-mm-yyyy" maxlength="10" autocomplete="off">
                        <input type="hidden" id="editBerlaku">
                    </div>
                </div>
                <div class="mb-1">
                    <label class="form-label fw-semibold">Catatan</label>
                    <textarea id="editCatatan" class="form-control form-control-sm" rows="2"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-warning btn-sm" onclick="simpanEdit()">
                    <i class="bx bx-save me-1"></i> Simpan Perubahan
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Import --}}
<div class="modal fade" id="modalImport" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Import Harga Jual</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info py-2 px-3 mb-3" style="font-size:.82rem">
                    <i class="bx bx-info-circle me-1"></i>
                    Gunakan kolom: <strong>Kode Barang, Nama Barang, Kode Faskes, Nama Faskes, Harga Jual, Berlaku Mulai, Catatan</strong>.
                    Format tanggal: YYYY-MM-DD.
                    <a href="{{ route('data-induk.harga-jual.template') }}" class="fw-semibold">Download template</a>
                </div>
                <div class="mb-2">
                    <label class="form-label fw-semibold">File Excel (.xlsx / .xls) <span class="text-danger">*</span></label>
                    <input type="file" id="inFile" class="form-control form-control-sm" accept=".xlsx,.xls">
                </div>
                <div id="importResult" class="d-none mt-2"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-primary btn-sm" id="btnImport" onclick="doImport()">
                    <i class="bx bx-upload me-1"></i> Upload & Import
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Tambah per Merek --}}
<div class="modal fade" id="modalPerMerek" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Tambah Harga per Merek</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Merek <span class="text-danger">*</span></label>
                    <select id="pmMerek" class="form-select form-select-sm">
                        <option value="">-- Pilih Merek --</option>
                        @foreach($merekOptions as $m)
                        <option value="{{ $m->id }}">{{ $m->nama }}</option>
                        @endforeach
                    </select>
                    <div id="pmMerekInfo" class="form-text d-none"></div>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Faskes <span class="text-danger">*</span></label>
                    <select id="pmFaskes" class="form-select form-select-sm">
                        <option value="">-- Pilih Faskes --</option>
                        @foreach($faskesOptions as $f)
                        <option value="{{ $f->id }}">{{ $f->nama }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Jenis Pasien</label>
                    <select id="pmJenisPasien" class="form-select form-select-sm">
                        <option value="">-- Semua Pasien (default) --</option>
                        @foreach($jenisPasienOptions as $jp)
                        <option value="{{ $jp->id }}">{{ $jp->nama }}</option>
                        @endforeach
                    </select>
                    <div class="form-text">Kosongkan jika harga berlaku untuk semua jenis pasien.</div>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold">Harga Jual Sebelum PPN <span class="text-danger">*</span></label>
                        <input type="text" id="pmHargaDisplay" class="form-control form-control-sm" placeholder="0" autocomplete="off">
                        <input type="hidden" id="pmHarga">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">Harga Jual Setelah PPN</label>
                        <input type="text" id="pmHargaAfterDisplay" class="form-control form-control-sm" placeholder="0" autocomplete="off">
                    </div>
                </div>
                <div class="mb-2">
                    <small class="text-muted">DPP = 11/12 × Sebelum PPN · PPN 12% dari DPP · Setelah PPN = Sebelum × 1,11</small>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold">Berlaku Mulai <span class="text-danger">*</span></label>
                        <input type="text" id="pmBerlakuDisplay" class="form-control form-control-sm" placeholder="dd-mm-yyyy" maxlength="10" autocomplete="off">
                        <input type="hidden" id="pmBerlaku">
                    </div>
                </div>
                <div class="mb-1">
                    <label class="form-label fw-semibold">Catatan</label>
                    <textarea id="pmCatatan" class="form-control form-control-sm" rows="2" placeholder="Opsional"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-secondary btn-sm" id="btnSimpanPerMerek" onclick="simpanPerMerek()">
                    <i class="bx bx-save me-1"></i> Simpan untuk Semua Barang Merek Ini
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Riwayat --}}
<div class="modal fade" id="modalRiwayat" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Riwayat Harga — <span id="riwayatLabel"></span></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-3">
                <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" id="tblRiwayat" style="border:1px solid #e9ecef; border-radius:6px; overflow:hidden;">
                    <thead class="table-light">
                        <tr>
                            <th style="width:145px; padding:10px 12px; border-bottom:2px solid #dee2e6;">Harga Sebelum PPN</th>
                            <th style="width:145px; padding:10px 12px; border-bottom:2px solid #dee2e6;">Harga Setelah PPN</th>
                            <th style="width:130px; padding:10px 12px; border-bottom:2px solid #dee2e6;">Berlaku Mulai</th>
                            <th style="width:90px; padding:10px 12px; border-bottom:2px solid #dee2e6;" class="text-center">Status</th>
                            <th style="padding:10px 12px; border-bottom:2px solid #dee2e6;">Catatan</th>
                            <th style="width:120px; padding:10px 12px; border-bottom:2px solid #dee2e6;">Diinput Oleh</th>
                            <th style="width:130px; padding:10px 12px; border-bottom:2px solid #dee2e6;">Dibuat</th>
                            <th style="width:80px; padding:10px 12px; border-bottom:2px solid #dee2e6;"></th>
                        </tr>
                    </thead>
                    <tbody id="riwayatBody">
                        <tr><td colspan="8" class="text-center text-muted py-4">Memuat...</td></tr>
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const URL_BASE    = '{{ url("data-induk/harga-jual") }}';
const URL_DATA    = '{{ route("data-induk.harga-jual.data") }}';
const URL_RIWAYAT = '{{ route("data-induk.harga-jual.riwayat") }}';
const URL_IMPORT  = '{{ route("data-induk.harga-jual.import") }}';
const CSRF        = '{{ csrf_token() }}';
const CAN_DELETE  = @json(auth('internal')->user()?->can('harga_jual.delete') ?? false);
const TODAY_ISO   = '{{ now()->toDateString() }}';

let table;

function buildTable() {
    table = $('#tblHargaJual').DataTable({
        serverSide : true,
        processing : true,
        ajax: {
            url: URL_DATA,
            data: function (d) {
                d.barang_id       = $('#filterBarang').val();
                d.merek_barang_id = $('#filterMerek').val();
                d.faskes_id       = $('#filterFaskes').val();
                d.jenis_pasien_id = $('#filterJenisPasien').val();
            }
        },
        columns: [
            { data: null, orderable: false, searchable: false, className: 'text-center',
              render: (d, t, r, m) => m.row + m.settings._iDisplayStart + 1 },
            { data: 'aksi',        orderable: false, className: 'text-center',
              render: function (id, t, row) {
                const merekSuffix = row.nama_merek && row.nama_merek !== '-' ? ` (${row.nama_merek})` : '';
                const labelBarang = row.nama_barang + merekSuffix;
                const jp = row.nama_jenis_pasien && row.nama_jenis_pasien !== '-' ? row.nama_jenis_pasien : '';
                const jpId = row.jenis_pasien_id ?? '';
                return `<button class="btn btn-info btn-sm px-2 py-1" title="Riwayat Harga" style="white-space:nowrap"
                    onclick="openRiwayat(${row.barang_id}, ${row.faskes_id}, '${escHtml(labelBarang)} / ${escHtml(row.nama_faskes)}', '${escHtml(jp)}', '${jpId}')">
                    <i class="bx bx-history fs-14"></i> Riwayat</button>`;
              }
            },
            { data: 'kode_barang', orderable: false },
            { data: null, orderable: false, render: (d, t, r) => r.nama_merek && r.nama_merek !== '-' ? `${r.nama_barang} <small class="text-muted">(${r.nama_merek})</small>` : r.nama_barang },
            { data: 'nama_faskes',      orderable: false },
            { data: 'nama_jenis_pasien', orderable: false, render: v => v && v !== '-' ? `<span class="badge bg-info-transparent text-info">${v}</span>` : '<span class="text-muted small">Semua</span>' },
            { data: 'harga_fmt',        orderable: false, className: 'text-end' },
            { data: 'berlaku_fmt', orderable: false, className: 'text-center' },
            { data: 'status',      orderable: false, className: 'text-center' },
        ],
        searching: false,
        language: { processing: 'Memuat...', zeroRecords: 'Tidak ada data.', info: 'Menampilkan _START_–_END_ dari _TOTAL_ data', infoEmpty: '', lengthMenu: 'Tampilkan _MENU_' },
        pageLength: 25,
        order: [],
    });
}

function escHtml(str) {
    return String(str ?? '').replace(/'/g, "\\'").replace(/"/g, '&quot;');
}

function applyFilter() { table.ajax.reload(); }
function resetFilter() {
    $('#filterBarang, #filterFaskes, #filterMerek').val(null).trigger('change');
    $('#filterJenisPasien').val('').trigger('change');
}

function formatRibuan(val) {
    // Terima angka murni atau decimal string dari server (misal "1000000.00")
    const num = Math.round(parseFloat(val) || 0);
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
}

function hargaAfterPpn(sebelum) {
    return Math.round(sebelum * 1.11);
}
function hargaBeforePpn(sesudah) {
    return Math.round(sesudah / 1.11);
}

function initHargaInputs() {
    // Tambah: Sebelum PPN → auto-isi Setelah PPN
    $('#inHargaDisplay').on('input', function () {
        const digits = $(this).val().replace(/\./g, '').replace(/\D/g, '');
        $(this).val(formatRibuan(digits));
        $('#inHarga').val(digits);
        const after = digits ? hargaAfterPpn(parseInt(digits)) : '';
        $('#inHargaAfterDisplay').val(after ? formatRibuan(after) : '');
    });
    // Tambah: Setelah PPN → auto-isi Sebelum PPN
    $('#inHargaAfterDisplay').on('input', function () {
        const digits = $(this).val().replace(/\./g, '').replace(/\D/g, '');
        $(this).val(formatRibuan(digits));
        const before = digits ? hargaBeforePpn(parseInt(digits)) : '';
        $('#inHargaDisplay').val(before ? formatRibuan(before) : '');
        $('#inHarga').val(before || '');
    });

    // Edit: Sebelum PPN → auto-isi Setelah PPN
    $('#editHargaDisplay').on('input', function () {
        const digits = $(this).val().replace(/\./g, '').replace(/\D/g, '');
        $(this).val(formatRibuan(digits));
        $('#editHarga').val(digits);
        const after = digits ? hargaAfterPpn(parseInt(digits)) : '';
        $('#editHargaAfterDisplay').val(after ? formatRibuan(after) : '');
    });
    // Edit: Setelah PPN → auto-isi Sebelum PPN
    $('#editHargaAfterDisplay').on('input', function () {
        const digits = $(this).val().replace(/\./g, '').replace(/\D/g, '');
        $(this).val(formatRibuan(digits));
        const before = digits ? hargaBeforePpn(parseInt(digits)) : '';
        $('#editHargaDisplay').val(before ? formatRibuan(before) : '');
        $('#editHarga').val(before || '');
    });
}

function openTambah() {
    $('#inBarang').val('').trigger('change');
    $('#inFaskes').val('').trigger('change');
    $('#inJenisPasien').val('').trigger('change');
    $('#inHargaDisplay').val('');
    $('#inHarga').val('');
    $('#inHargaAfterDisplay').val('');
    const today = new Date();
    fpBerlaku.setDate(today, true);
    const iso = today.getFullYear() + '-' + String(today.getMonth()+1).padStart(2,'0') + '-' + String(today.getDate()).padStart(2,'0');
    $('#inBerlaku').val(iso);
    $('#inCatatan').val('');
    new bootstrap.Modal('#modalTambah').show();
}

function simpan() {
    $.ajax({
        url: URL_BASE,
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': CSRF },
        data: {
            barang_id:       $('#inBarang').val(),
            faskes_id:       $('#inFaskes').val(),
            jenis_pasien_id: $('#inJenisPasien').val() || '',
            harga:           $('#inHarga').val(),
            berlaku_mulai:   $('#inBerlaku').val(),
            catatan:         $('#inCatatan').val(),
        },
        success: function (res) {
            if (res.success) {
                bootstrap.Modal.getInstance('#modalTambah').hide();
                Swal.fire({ icon: 'success', title: 'Berhasil', text: res.message, timer: 1500, showConfirmButton: false });
                table.ajax.reload(null, false);
            }
        },
        error: function (xhr) {
            const msg = xhr.responseJSON?.message ?? Object.values(xhr.responseJSON?.errors ?? {})[0]?.[0] ?? 'Terjadi kesalahan.';
            Swal.fire({ icon: 'error', title: 'Gagal', text: msg });
        }
    });
}

function hapus(id) {
    Swal.fire({
        title: 'Hapus harga ini?',
        text: 'Data tidak bisa dikembalikan.',
        icon: 'warning', showCancelButton: true,
        confirmButtonText: 'Ya, Hapus', cancelButtonText: 'Batal',
    }).then(r => {
        if (!r.isConfirmed) return;
        $.ajax({
            url: URL_BASE + '/' + id, method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': CSRF },
            success: function (res) {
                if (res.success) {
                    Swal.fire({ icon: 'success', title: 'Dihapus', text: res.message, timer: 1500, showConfirmButton: false });
                    table.ajax.reload(null, false);
                }
            },
            error: function (xhr) {
                Swal.fire({ icon: 'error', title: 'Gagal', text: xhr.responseJSON?.message ?? 'Terjadi kesalahan.' });
            }
        });
    });
}

function openRiwayat(barangId, faskesId, label, jenisPasienNama, jenisPasienId) {
    const jpLabel = jenisPasienNama ? ` · <span style="color:#dc3545;font-weight:600">${jenisPasienNama}</span>` : '';
    $('#riwayatLabel').html(label + jpLabel);
    $('#riwayatBody').html('<tr><td colspan="8" class="text-center text-muted py-3">Memuat...</td></tr>');
    new bootstrap.Modal('#modalRiwayat').show();

    $.ajax({
        url: URL_RIWAYAT,
        method: 'GET',
        headers: { 'X-CSRF-TOKEN': CSRF },
        data: { barang_id: barangId, faskes_id: faskesId, jenis_pasien_id: jenisPasienId || '' },
        success: function (data) {
            let html = '';
            // Tentukan status per baris berdasarkan berlaku_iso vs hari ini
            // Data sudah diurutkan DESC berlaku_mulai dari server
            let aktifFound = false;
            data.forEach((r) => {
                let badge, isLama, isMendatang;
                if (r.berlaku_iso > TODAY_ISO) {
                    badge      = '<span class="badge bg-warning text-dark">Mendatang</span>';
                    isLama     = false;
                    isMendatang = true;
                } else if (!aktifFound) {
                    badge      = '<span class="badge bg-success">Aktif</span>';
                    isLama     = false;
                    isMendatang = false;
                    aktifFound = true;
                } else {
                    badge      = '<span class="badge bg-secondary">Lama</span>';
                    isLama     = true;
                    isMendatang = false;
                }

                const dis    = isLama ? ' disabled' : '';
                const delBtn = (!isLama && CAN_DELETE)
                    ? `<button class="btn btn-danger btn-sm px-2 py-1" onclick="hapusFromRiwayat(${r.id}, ${barangId}, ${faskesId}, '${escHtml(label)}', '${escHtml(jenisPasienNama)}', '${jenisPasienId}')"><i class="bx bx-trash fs-13"></i></button>`
                    : '';
                const saveBtn = !isLama
                    ? `<button class="btn btn-success btn-sm px-2 py-1 me-1" onclick="inlineSave(${r.id})" title="Simpan"><i class="bx bx-check fs-13"></i></button>`
                    : '';

                const hargaAfter = r.harga_raw ? hargaAfterPpn(Math.round(parseFloat(r.harga_raw))) : '';
                html += `<tr id="rw-${r.id}" data-id="${r.id}" data-barang="${barangId}" data-faskes="${faskesId}" data-label="${escHtml(label)}">
                    <td><input type="text" class="form-control form-control-sm rv-harga-display" value="${formatRibuan(r.harga_raw)}"${dis}><input type="hidden" class="rv-harga-raw" value="${r.harga_raw}"></td>
                    <td><input type="text" class="form-control form-control-sm rv-harga-after-display" value="${hargaAfter ? formatRibuan(hargaAfter) : ''}"${dis}></td>
                    <td><input type="text" class="form-control form-control-sm rv-berlaku-display" value="${r.berlaku_dmy}" maxlength="10"${dis}><input type="hidden" class="rv-berlaku-iso" value="${r.berlaku_iso}"></td>
                    <td class="text-center">${badge}</td>
                    <td><input type="text" class="form-control form-control-sm rv-catatan" value="${escHtml(r.catatan)}"${dis}></td>
                    <td style="font-size:.82rem">${r.oleh}</td>
                    <td style="font-size:.8rem">${r.dibuat}</td>
                    <td class="text-center" style="white-space:nowrap">${saveBtn}${delBtn}</td>
                </tr>`;
            });
            $('#riwayatBody').html(html || '<tr><td colspan="8" class="text-center text-muted py-3">Tidak ada riwayat.</td></tr>');
            initRiwayatInputs();
        },
        error: function (xhr) {
            const msg = xhr.responseJSON?.message ?? 'Gagal memuat riwayat (status ' + xhr.status + ').';
            $('#riwayatBody').html(`<tr><td colspan="8" class="text-center text-danger py-3">${msg}</td></tr>`);
        }
    });
}

function hapusFromRiwayat(id, barangId, faskesId, label, jenisPasienNama, jenisPasienId) {
    Swal.fire({
        title: 'Hapus entri ini?', icon: 'warning', showCancelButton: true,
        confirmButtonText: 'Ya, Hapus', cancelButtonText: 'Batal',
    }).then(r => {
        if (!r.isConfirmed) return;
        $.ajax({
            url: URL_BASE + '/' + id, method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': CSRF },
            success: function (res) {
                if (res.success) {
                    table.ajax.reload(null, false);
                    openRiwayat(barangId, faskesId, label, jenisPasienNama, jenisPasienId);
                }
            },
            error: function (xhr) {
                Swal.fire({ icon: 'error', title: 'Gagal', text: xhr.responseJSON?.message ?? 'Terjadi kesalahan.' });
            }
        });
    });
}

function initRiwayatInputs() {
    // Sebelum PPN → auto-isi Setelah PPN
    $(document).off('input', '.rv-harga-display').on('input', '.rv-harga-display', function () {
        const digits = $(this).val().replace(/\./g, '').replace(/\D/g, '');
        $(this).val(formatRibuan(digits));
        $(this).closest('td').find('.rv-harga-raw').val(digits);
        const after = digits ? hargaAfterPpn(parseInt(digits)) : '';
        $(this).closest('tr').find('.rv-harga-after-display').val(after ? formatRibuan(after) : '');
    });
    // Setelah PPN → auto-isi Sebelum PPN
    $(document).off('input', '.rv-harga-after-display').on('input', '.rv-harga-after-display', function () {
        const digits = $(this).val().replace(/\./g, '').replace(/\D/g, '');
        $(this).val(formatRibuan(digits));
        const before = digits ? hargaBeforePpn(parseInt(digits)) : '';
        const $row = $(this).closest('tr');
        $row.find('.rv-harga-display').val(before ? formatRibuan(before) : '');
        $row.find('.rv-harga-raw').val(before || '');
    });
    // Auto-dash tanggal
    $(document).off('input', '.rv-berlaku-display').on('input', '.rv-berlaku-display', function () {
        const digits = $(this).val().replace(/\D/g, '').substring(0, 8);
        let fmt = digits.substring(0, 2);
        if (digits.length > 2) fmt += '-' + digits.substring(2, 4);
        if (digits.length > 4) fmt += '-' + digits.substring(4, 8);
        $(this).val(fmt);
        if (fmt.length === 10) {
            const parts = fmt.split('-');
            $(this).closest('td').find('.rv-berlaku-iso').val(`${parts[2]}-${parts[1]}-${parts[0]}`);
        }
    });
}


function inlineSave(id) {
    const $row    = $(`#rw-${id}`);
    const harga   = $row.find('.rv-harga-raw').val();
    const berlaku = $row.find('.rv-berlaku-iso').val();
    const catatan = $row.find('.rv-catatan').val();

    if (!harga || !berlaku) {
        Swal.fire({ icon: 'warning', title: 'Lengkapi data', text: 'Harga dan tanggal berlaku wajib diisi.' });
        return;
    }

    $.ajax({
        url: URL_UPDATE + '/' + id,
        method: 'PUT',
        headers: { 'X-CSRF-TOKEN': CSRF },
        data: { harga, berlaku_mulai: berlaku, catatan },
        success: function (res) {
            if (res.success) {
                const barangId = $row.data('barang');
                const faskesId = $row.data('faskes');
                const label    = $row.data('label');
                table.ajax.reload(null, false);
                openRiwayat(barangId, faskesId, label);
            }
        },
        error: function (xhr) {
            Swal.fire({ icon: 'error', title: 'Gagal', text: xhr.responseJSON?.message ?? 'Terjadi kesalahan.' });
        }
    });
}

function openImport() {
    $('#inFile').val('');
    $('#importResult').addClass('d-none').html('');
    new bootstrap.Modal('#modalImport').show();
}

function doImport() {
    const file = $('#inFile')[0].files[0];
    if (!file) { Swal.fire({ icon: 'warning', title: 'Pilih file', text: 'Harap pilih file Excel terlebih dahulu.' }); return; }

    const fd = new FormData();
    fd.append('file', file);
    fd.append('_token', CSRF);

    $('#btnImport').prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Mengimpor...');

    $.ajax({
        url: URL_IMPORT, method: 'POST', data: fd,
        processData: false, contentType: false,
        success: function (res) {
            let html = `<div class="alert alert-success py-2 px-3 mb-2">${res.message}</div>`;
            if (res.errors && res.errors.length) {
                html += `<div class="alert alert-warning py-2 px-3" style="font-size:.8rem"><strong>Baris yang gagal:</strong><ul class="mb-0 ps-3 mt-1">`;
                res.errors.forEach(e => { html += `<li>${e}</li>`; });
                html += `</ul></div>`;
            }
            $('#importResult').removeClass('d-none').html(html);
            if (res.count > 0) table.ajax.reload(null, false);
        },
        error: function (xhr) {
            const msg = xhr.responseJSON?.message ?? 'Terjadi kesalahan saat import.';
            $('#importResult').removeClass('d-none').html(`<div class="alert alert-danger py-2 px-3">${msg}</div>`);
        },
        complete: function () {
            $('#btnImport').prop('disabled', false).html('<i class="bx bx-upload me-1"></i> Upload & Import');
        }
    });
}

const URL_UPDATE = '{{ url("data-induk/harga-jual") }}';

function openEdit(id, namaBarang, namaFaskes) {
    $.get(URL_UPDATE + '/' + id, function (d) {
        $('#editId').val(d.id);
        $('#editInfo').html(`<i class="bx bx-info-circle me-1"></i><strong>${namaBarang}</strong> &rarr; ${namaFaskes}`);
        $('#editHargaDisplay').val(formatRibuan(d.harga));
        $('#editHarga').val(d.harga);
        $('#editHargaAfterDisplay').val(d.harga ? formatRibuan(hargaAfterPpn(Math.round(parseFloat(d.harga)))) : '');
        fpEdit.setDate(d.berlaku_mulai, true);
        $('#editBerlaku').val(d.berlaku_iso);
        $('#editCatatan').val(d.catatan);
        new bootstrap.Modal('#modalEdit').show();
    });
}



function simpanEdit() {
    $.ajax({
        url: URL_UPDATE + '/' + $('#editId').val(),
        method: 'PUT',
        headers: { 'X-CSRF-TOKEN': CSRF },
        data: {
            harga:         $('#editHarga').val(),
            berlaku_mulai: $('#editBerlaku').val(),
            catatan:       $('#editCatatan').val(),
        },
        success: function (res) {
            if (res.success) {
                bootstrap.Modal.getInstance('#modalEdit').hide();
                Swal.fire({ icon: 'success', title: 'Berhasil', text: res.message, timer: 1500, showConfirmButton: false });
                table.ajax.reload(null, false);
            }
        },
        error: function (xhr) {
            const msg = xhr.responseJSON?.message ?? Object.values(xhr.responseJSON?.errors ?? {})[0]?.[0] ?? 'Terjadi kesalahan.';
            Swal.fire({ icon: 'error', title: 'Gagal', text: msg });
        }
    });
}

// Select2
function initSelect2() {
    $('#inBarang').select2({ dropdownParent: $('#modalTambah'), placeholder: '-- Pilih Barang --', allowClear: true, width: '100%' });
    $('#inFaskes').select2({ dropdownParent: $('#modalTambah'), placeholder: '-- Pilih Faskes --', allowClear: true, width: '100%' });
    $('#inJenisPasien').select2({ dropdownParent: $('#modalTambah'), placeholder: '-- Semua Pasien (default) --', allowClear: true, width: '100%' });

    $('#pmMerek').select2({ dropdownParent: $('#modalPerMerek'), placeholder: '-- Pilih Merek --', allowClear: true, width: '100%' });
    $('#pmFaskes').select2({ dropdownParent: $('#modalPerMerek'), placeholder: '-- Pilih Faskes --', allowClear: true, width: '100%' });
    $('#pmJenisPasien').select2({ dropdownParent: $('#modalPerMerek'), placeholder: '-- Semua Pasien (default) --', allowClear: true, width: '100%' });

    $('#filterBarang').select2({ placeholder: 'Semua Barang', allowClear: true, width: '100%' });
    $('#filterMerek').select2({ placeholder: 'Semua Merek', allowClear: true, width: '100%' });
    $('#filterFaskes').select2({ placeholder: 'Semua Faskes', allowClear: true, width: '100%' });
    $('#filterJenisPasien').select2({ placeholder: 'Semua Jenis Pasien', allowClear: true, width: '100%' });
    $('#filterBarang, #filterMerek, #filterFaskes, #filterJenisPasien').on('change', function () { table.ajax.reload(); });

    $('#pmMerek').on('change', function () {
        const id = $(this).val();
        const $info = $('#pmMerekInfo');
        if (!id) { $info.addClass('d-none').text(''); return; }
        $info.removeClass('d-none').text('Memuat daftar barang...');
        $.get('{{ route("data-induk.harga-jual.barang-by-merek") }}', { merek_barang_id: id }, function (res) {
            if (res.count === 0) {
                $info.html('<span class="text-warning">Tidak ada barang aktif untuk merek ini.</span>');
            } else {
                $info.html(`<span class="text-success fw-semibold">${res.count} barang aktif</span> akan dibuatkan harga.`);
            }
        }).fail(function () { $info.html('<span class="text-danger">Gagal memuat daftar barang.</span>'); });
    });
}

// Flatpickr — berlaku mulai
let fpBerlaku;
function initFlatpickr() {
    fpBerlaku = flatpickr('#inBerlakuDisplay', {
        dateFormat   : 'd-m-Y',
        allowInput   : true,
        disableMobile: true,
        locale: {
            months: {
                shorthand: ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des'],
                longhand : ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'],
            },
            weekdays: {
                shorthand: ['Min','Sen','Sel','Rab','Kam','Jum','Sab'],
                longhand : ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'],
            },
            firstDayOfWeek: 1,
        },
        onChange: function(dates) {
            if (dates.length > 0) {
                const d = dates[0];
                const iso = d.getFullYear() + '-'
                    + String(d.getMonth()+1).padStart(2,'0') + '-'
                    + String(d.getDate()).padStart(2,'0');
                $('#inBerlaku').val(iso);
            } else {
                $('#inBerlaku').val('');
            }
        },
    });

    // Auto-dash saat ketik manual
    let _typing = false;
    $('#inBerlakuDisplay').on('input', function () {
        if (_typing) return;
        const digits = $(this).val().replace(/\D/g, '').substring(0, 8);
        let fmt = digits.substring(0, 2);
        if (digits.length > 2) fmt += '-' + digits.substring(2, 4);
        if (digits.length > 4) fmt += '-' + digits.substring(4, 8);
        $(this).val(fmt);
        if (fmt.length === 10) {
            _typing = true;
            fpBerlaku.setDate(fmt, true);
            _typing = false;
        }
    });
}

let fpEdit;
function initFlatpickrEdit() {
    fpEdit = flatpickr('#editBerlakuDisplay', {
        dateFormat   : 'd-m-Y',
        allowInput   : true,
        disableMobile: true,
        locale: {
            months: {
                shorthand: ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des'],
                longhand : ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'],
            },
            weekdays: {
                shorthand: ['Min','Sen','Sel','Rab','Kam','Jum','Sab'],
                longhand : ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'],
            },
            firstDayOfWeek: 1,
        },
        onChange: function(dates) {
            if (dates.length > 0) {
                const d = dates[0];
                $('#editBerlaku').val(d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0'));
            } else {
                $('#editBerlaku').val('');
            }
        },
    });

    let _t = false;
    $('#editBerlakuDisplay').on('input', function () {
        if (_t) return;
        const digits = $(this).val().replace(/\D/g, '').substring(0, 8);
        let fmt = digits.substring(0, 2);
        if (digits.length > 2) fmt += '-' + digits.substring(2, 4);
        if (digits.length > 4) fmt += '-' + digits.substring(4, 8);
        $(this).val(fmt);
        if (fmt.length === 10) { _t = true; fpEdit.setDate(fmt, true); _t = false; }
    });
}

let fpPerMerek;
function initFlatpickrPerMerek() {
    fpPerMerek = flatpickr('#pmBerlakuDisplay', {
        dateFormat: 'd-m-Y', allowInput: true, disableMobile: true,
        locale: {
            months: { shorthand: ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des'], longhand: ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'] },
            weekdays: { shorthand: ['Min','Sen','Sel','Rab','Kam','Jum','Sab'], longhand: ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'] },
            firstDayOfWeek: 1,
        },
        onChange: function (dates) {
            if (dates.length > 0) {
                const d = dates[0];
                $('#pmBerlaku').val(d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0'));
            } else { $('#pmBerlaku').val(''); }
        },
    });
    let _tp = false;
    $('#pmBerlakuDisplay').on('input', function () {
        if (_tp) return;
        const digits = $(this).val().replace(/\D/g, '').substring(0, 8);
        let fmt = digits.substring(0, 2);
        if (digits.length > 2) fmt += '-' + digits.substring(2, 4);
        if (digits.length > 4) fmt += '-' + digits.substring(4, 8);
        $(this).val(fmt);
        if (fmt.length === 10) { _tp = true; fpPerMerek.setDate(fmt, true); _tp = false; }
    });
}

function initHargaPerMerekInputs() {
    $('#pmHargaDisplay').on('input', function () {
        const digits = $(this).val().replace(/\./g, '').replace(/\D/g, '');
        $(this).val(formatRibuan(digits));
        $('#pmHarga').val(digits);
        $('#pmHargaAfterDisplay').val(digits ? formatRibuan(hargaAfterPpn(parseInt(digits))) : '');
    });
    $('#pmHargaAfterDisplay').on('input', function () {
        const digits = $(this).val().replace(/\./g, '').replace(/\D/g, '');
        $(this).val(formatRibuan(digits));
        const before = digits ? hargaBeforePpn(parseInt(digits)) : '';
        $('#pmHargaDisplay').val(before ? formatRibuan(before) : '');
        $('#pmHarga').val(before || '');
    });
}

function openTambahPerMerek() {
    $('#pmMerek').val('').trigger('change');
    $('#pmFaskes').val('').trigger('change');
    $('#pmJenisPasien').val('').trigger('change');
    $('#pmHargaDisplay').val('');
    $('#pmHarga').val('');
    $('#pmHargaAfterDisplay').val('');
    $('#pmMerekInfo').addClass('d-none').text('');
    const today = new Date();
    fpPerMerek.setDate(today, true);
    const iso = today.getFullYear() + '-' + String(today.getMonth()+1).padStart(2,'0') + '-' + String(today.getDate()).padStart(2,'0');
    $('#pmBerlaku').val(iso);
    $('#pmCatatan').val('');
    new bootstrap.Modal('#modalPerMerek').show();
}

function simpanPerMerek() {
    const merekId = $('#pmMerek').val();
    const faskesId = $('#pmFaskes').val();
    const harga = $('#pmHarga').val();
    const berlaku = $('#pmBerlaku').val();

    if (!merekId || !faskesId || !harga || !berlaku) {
        Swal.fire({ icon: 'warning', title: 'Lengkapi data', text: 'Merek, Faskes, Harga, dan Berlaku Mulai wajib diisi.' });
        return;
    }

    Swal.fire({
        title: 'Simpan harga untuk semua barang merek ini?',
        text: 'Satu baris harga akan dibuat per barang aktif dari merek yang dipilih.',
        icon: 'question', showCancelButton: true,
        confirmButtonText: 'Ya, Simpan', cancelButtonText: 'Batal',
    }).then(r => {
        if (!r.isConfirmed) return;
        $('#btnSimpanPerMerek').prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Menyimpan...');
        $.ajax({
            url: '{{ route("data-induk.harga-jual.store-per-merek") }}',
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF },
            data: {
                merek_barang_id: merekId,
                faskes_id:       faskesId,
                jenis_pasien_id: $('#pmJenisPasien').val() || '',
                harga:           harga,
                berlaku_mulai:   berlaku,
                catatan:         $('#pmCatatan').val(),
            },
            success: function (res) {
                if (res.success) {
                    bootstrap.Modal.getInstance('#modalPerMerek').hide();
                    Swal.fire({ icon: 'success', title: 'Berhasil', text: res.message, timer: 2000, showConfirmButton: false });
                    table.ajax.reload(null, false);
                }
            },
            error: function (xhr) {
                const msg = xhr.responseJSON?.message ?? Object.values(xhr.responseJSON?.errors ?? {})[0]?.[0] ?? 'Terjadi kesalahan.';
                Swal.fire({ icon: 'error', title: 'Gagal', text: msg });
            },
            complete: function () {
                $('#btnSimpanPerMerek').prop('disabled', false).html('<i class="bx bx-save me-1"></i> Simpan untuk Semua Barang Merek Ini');
            }
        });
    });
}

$(function () {
    buildTable();
    initSelect2();
    initFlatpickr();
    initFlatpickrEdit();
    initFlatpickrPerMerek();
    initHargaInputs();
    initHargaPerMerekInputs();

    // Bersihkan backdrop yang tersisa saat modal ditutup
    document.querySelectorAll('.modal').forEach(function (el) {
        el.addEventListener('hidden.bs.modal', function () {
            document.querySelectorAll('.modal-backdrop').forEach(function (b) { b.remove(); });
            document.body.classList.remove('modal-open');
            document.body.style.removeProperty('overflow');
            document.body.style.removeProperty('padding-right');
        });
    });
});
</script>
@endpush