@extends('layouts.master')

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

@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; }
    #tblHargaBeli thead th { white-space: nowrap; border: 1px solid #f0f0f0 !important; }
    #tblHargaBeli tbody td { border: 1px solid #f0f0f0 !important; }
    #tblHargaBeli th, #tblHargaBeli 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; }
</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 Beli</p>
            <span class="fs-13 text-muted">Data Induk &rarr; Harga Beli</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 Beli</div>
                    <div class="d-flex gap-2">
                    @can('harga_beli.view')
                        <a href="{{ route('data-induk.harga-beli.export-excel') }}" class="btn btn-success btn-sm">
                            <i class="bx bx-download me-1"></i> Unduh Excel
                        </a>
                    @endcan
                    @can('harga_beli.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 Beli
                        </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-5">
                            <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-5">
                            <label class="form-label mb-1 small fw-semibold">Filter Produsen / Supplier</label>
                            <select id="filterProdusen" class="form-select form-select-sm">
                                <option value="">Semua Produsen</option>
                                @foreach($produsenOptions as $p)
                                <option value="{{ $p->id }}">{{ $p->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <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="tblHargaBeli" 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:150px">Produsen / Supplier</th>
                                    <th class="text-end" style="width:140px">Harga Beli</th>
                                    <th class="text-center" style="width:120px">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 Beli</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 }}">{{ $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">Produsen / Supplier <span class="text-danger">*</span></label>
                    <select id="inProdusen" class="form-select form-select-sm">
                        <option value="">-- Pilih Produsen --</option>
                        @foreach($produsenOptions as $p)
                        <option value="{{ $p->id }}">{{ $p->nama }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold">Harga Beli <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">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 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 Beli</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>
                    Kolom: <strong>Kode Barang, Nama Barang, Kode Produsen, Nama Produsen, Harga Beli, Berlaku Mulai, Catatan</strong>.
                    Format tanggal: YYYY-MM-DD.
                    <a href="{{ route('data-induk.harga-beli.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 Beli 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">Produsen / Supplier <span class="text-danger">*</span></label>
                    <select id="pmProdusen" class="form-select form-select-sm">
                        <option value="">-- Pilih Produsen --</option>
                        @foreach($produsenOptions as $p)
                        <option value="{{ $p->id }}">{{ $p->nama }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold">Harga Beli <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">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 Beli — <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 Beli</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="7" 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-beli") }}';
const URL_DATA    = '{{ route("data-induk.harga-beli.data") }}';
const URL_RIWAYAT = '{{ route("data-induk.harga-beli.riwayat") }}';
const URL_IMPORT  = '{{ route("data-induk.harga-beli.import") }}';
const CSRF        = '{{ csrf_token() }}';
const CAN_DELETE  = @json(auth('internal')->user()?->can('harga_beli.delete') ?? false);
const TODAY_ISO   = '{{ now()->toDateString() }}';

let table;

function buildTable() {
    table = $('#tblHargaBeli').DataTable({
        serverSide: true,
        processing: true,
        ajax: {
            url: URL_DATA,
            data: function (d) {
                d.barang_id   = $('#filterBarang').val();
                d.produsen_id = $('#filterProdusen').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 label = row.nama_barang + merekSuffix + ' / ' + row.nama_produsen;
                return `<button class="btn btn-info btn-sm px-2 py-1" onclick="openRiwayat(${row.barang_id}, ${row.produsen_id}, '${escHtml(label)}')">
                    <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_produsen', orderable: false },
            { 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 resetFilter() {
    $('#filterBarang, #filterProdusen').val(null).trigger('change');
}

function formatRibuan(val) {
    const num = Math.round(parseFloat(val) || 0);
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
}

function openTambah() {
    $('#inBarang').val('').trigger('change');
    $('#inProdusen').val('').trigger('change');
    $('#inHargaDisplay').val('');
    $('#inHarga').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(),
            produsen_id: $('#inProdusen').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, produsenId, label) {
    $('#riwayatLabel').text(label);
    $('#riwayatBody').html('<tr><td colspan="7" class="text-center text-muted py-3">Memuat...</td></tr>');
    new bootstrap.Modal('#modalRiwayat').show();

    $.get(URL_RIWAYAT, { barang_id: barangId, produsen_id: produsenId }, function (data) {
        let html = '';
        let aktifFound = false;
        data.forEach((r) => {
            let badge;
            if (r.berlaku_iso > TODAY_ISO) {
                badge = '<span class="badge bg-warning text-dark">Mendatang</span>';
            } else if (!aktifFound) {
                badge = '<span class="badge bg-success">Aktif</span>';
                aktifFound = true;
            } else {
                badge = '<span class="badge bg-secondary">Lama</span>';
            }
            const isLama = badge.includes('Lama');
            const dis = isLama ? ' disabled' : '';
            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 delBtn = (!isLama && CAN_DELETE)
                ? `<button class="btn btn-danger btn-sm px-2 py-1" onclick="hapusFromRiwayat(${r.id}, ${barangId}, ${produsenId}, '${escHtml(label)}')"><i class="bx bx-trash fs-13"></i></button>`
                : '';

            html += `<tr id="rw-${r.id}" data-id="${r.id}" data-barang="${barangId}" data-produsen="${produsenId}" 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-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="7" class="text-center text-muted py-3">Tidak ada riwayat.</td></tr>');
        initRiwayatInputs();
    }).fail(function (xhr) {
        const msg = xhr.responseJSON?.message ?? 'Gagal memuat riwayat.';
        $('#riwayatBody').html(`<tr><td colspan="7" class="text-center text-danger py-3">${msg}</td></tr>`);
    });
}

function hapusFromRiwayat(id, barangId, produsenId, label) {
    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, produsenId, label);
                }
            },
            error: function (xhr) {
                Swal.fire({ icon: 'error', title: 'Gagal', text: xhr.responseJSON?.message ?? 'Terjadi kesalahan.' });
            }
        });
    });
}

function initRiwayatInputs() {
    $(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);
    });
    $(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_BASE + '/' + 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 produsenId = $row.data('produsen');
                const label     = $row.data('label');
                table.ajax.reload(null, false);
                openRiwayat(barangId, produsenId, label);
            }
        },
        error: function (xhr) {
            Swal.fire({ icon: 'error', title: 'Gagal', text: xhr.responseJSON?.message ?? 'Terjadi kesalahan.' });
        }
    });
}

// Harga input formatting
function initHargaInputs() {
    $('#inHargaDisplay').on('input', function () {
        const digits = $(this).val().replace(/\./g, '').replace(/\D/g, '');
        $(this).val(formatRibuan(digits));
        $('#inHarga').val(digits);
    });
}

// Flatpickr
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];
                $('#inBerlaku').val(d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0'));
            } else { $('#inBerlaku').val(''); }
        },
    });
    let _t = false;
    $('#inBerlakuDisplay').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; fpBerlaku.setDate(fmt, true); _t = false; }
    });
}

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');
        }
    });
}

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 _t = false;
    $('#pmBerlakuDisplay').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; fpPerMerek.setDate(fmt, true); _t = false; }
    });
}

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

function simpanPerMerek() {
    if (!$('#pmMerek').val() || !$('#pmProdusen').val() || !$('#pmHarga').val() || !$('#pmBerlaku').val()) {
        Swal.fire({ icon: 'warning', title: 'Lengkapi data', text: 'Merek, Produsen, Harga, dan Berlaku Mulai wajib diisi.' });
        return;
    }
    Swal.fire({
        title: 'Simpan harga beli untuk semua barang merek ini?',
        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-beli.store-per-merek") }}',
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF },
            data: {
                merek_barang_id: $('#pmMerek').val(),
                produsen_id:     $('#pmProdusen').val(),
                harga:           $('#pmHarga').val(),
                berlaku_mulai:   $('#pmBerlaku').val(),
                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');
            }
        });
    });
}

// Select2
function initSelect2() {
    $('#inBarang').select2({ dropdownParent: $('#modalTambah'), placeholder: '-- Pilih Barang --', allowClear: true, width: '100%' });
    $('#inProdusen').select2({ dropdownParent: $('#modalTambah'), placeholder: '-- Pilih Produsen --', allowClear: true, width: '100%' });

    $('#pmMerek').select2({ dropdownParent: $('#modalPerMerek'), placeholder: '-- Pilih Merek --', allowClear: true, width: '100%' });
    $('#pmProdusen').select2({ dropdownParent: $('#modalPerMerek'), placeholder: '-- Pilih Produsen --', allowClear: true, width: '100%' });
    $('#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...');
        $.get('{{ route("data-induk.harga-beli.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.</span>'); });
    });

    $('#filterBarang').select2({ placeholder: 'Semua Barang', allowClear: true, width: '100%' });
    $('#filterProdusen').select2({ placeholder: 'Semua Produsen', allowClear: true, width: '100%' });
    $('#filterBarang, #filterProdusen').on('change', function () { table.ajax.reload(); });
}

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

    $('#pmHargaDisplay').on('input', function () {
        const digits = $(this).val().replace(/\./g, '').replace(/\D/g, '');
        $(this).val(formatRibuan(digits));
        $('#pmHarga').val(digits);
    });

    document.getElementById('modalImport').addEventListener('show.bs.modal', function () {
        $('#inFile').val('');
        $('#importResult').addClass('d-none').html('');
    });

    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