@extends('layouts.master')

@section('title', isset($po) ? 'Edit Purchase Order' : 'Buat Purchase Order')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    /* ── Select2 sizing ── */
    .select2-container .select2-selection--single { height: 36px !important; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px !important; font-size: .875rem; padding-left: 10px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px !important; }
    .select2-dropdown { font-size: .875rem; }

    /* Select2 inline barang — wrap nama panjang */
    .s2-barang .select2-selection--single {
        height: auto !important;
        min-height: 30px !important;
        position: relative !important;
    }
    .s2-barang .select2-selection__rendered {
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.4 !important;
        font-size: .82rem !important;
        padding: 4px 44px 4px 8px !important;
    }
    .s2-barang .select2-selection__arrow {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        height: 20px !important;
    }
    .s2-barang .select2-selection__clear {
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        float: none !important;
        margin: 0 !important;
    }

    /* ── Tabel items ── */
    #tblItems { font-size: .83rem; }
    #tblItems thead th { background: #f8f5ff; color: #7c3aed; border: 1px solid #e9d5ff; white-space: nowrap; vertical-align: middle; padding: 7px 10px; }
    #tblItems tbody td { border: 1px solid #f0e8ff; vertical-align: middle; padding: 6px 8px; }
    #tblItems tfoot td { background: #faf5ff; font-weight: 600; border: 1px solid #e9d5ff; padding: 7px 10px; }

    /* Baris inline add */
    #trInlineAdd td { background: #fdfaff; border: 1px solid #e9d5ff; padding: 6px 6px; }
    .inline-ctrl { font-size: .8rem !important; padding: 3px 7px !important; height: 30px; }
    .inline-ctrl-right { text-align: right; }
    .chip-info { display: inline-block; font-size: .75rem; color: #6c757d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
    .table-responsive::-webkit-scrollbar { height: 6px; }
    .table-responsive::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
    .table-responsive::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 3px; }
    .table-responsive::-webkit-scrollbar-thumb:hover { background: #7c3aed; }
    #tblItems tbody td:nth-child(2) { overflow:hidden; }
    #tblItems tbody td:nth-child(2) .fw-semibold { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }

    /* Modal browse */
    #tblBrowse { font-size: .82rem; }
    #tblBrowse thead th { background: #f8f5ff; color: #7c3aed; border: 1px solid #e9d5ff; white-space: nowrap; }
    #tblBrowse tbody tr { cursor: pointer; }
    #tblBrowse tbody tr:hover td { background: #faf5ff; }
    #tblBrowse td { border: 1px solid #f0e8ff; vertical-align: middle; }
    .row-selected td { background: #ede9fe !important; font-weight: 600; }
</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">{{ isset($po) ? 'Edit Purchase Order' : 'Buat Purchase Order' }}</p>
            <span class="fs-13 text-muted">Pengadaan › Purchase Order › {{ isset($po) ? 'Edit' : 'Buat Baru' }}</span>
        </div>
        <a href="{{ route('pengadaan.po.index') }}" class="btn btn-secondary btn-sm mt-2 mt-md-0">
            <i class="bx bx-arrow-back me-1"></i> Kembali
        </a>
    </div>

    {{-- ══ Notif Revisi (hanya saat edit PO direvisi) ══ --}}
    @if(isset($po) && $po->isDirevisi() && $po->latestRevisi)
    <div class="alert alert-warning d-flex gap-2 align-items-start mb-3">
        <i class="bx bx-revision fs-18 mt-1 flex-shrink-0"></i>
        <div>
            <div class="fw-semibold">Catatan Revisi dari {{ $po->latestRevisi->olehUser?->nama ?? '—' }}</div>
            <div class="mt-1">{{ $po->latestRevisi->catatan }}</div>
            <div class="text-muted small mt-1">{{ $po->latestRevisi->created_at->translatedFormat('d M Y, H:i') }}</div>
        </div>
    </div>
    @endif

    <form id="formPO" autocomplete="off">
    @csrf
    @if(isset($po)) @method('PUT') @endif

    {{-- ══ Header PO ══════════════════════════════════════════════ --}}
    <div class="card custom-card mb-3">
        <div class="card-header">
            <div class="card-title mb-0"><i class="bx bx-file-blank me-2 text-primary"></i>Informasi PO</div>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Nomor PO</label>
                    <input type="text" class="form-control form-control-sm bg-light"
                           value="{{ $po->nomor_po ?? '—' }}" readonly>
                    <small class="text-muted">Digenerate saat simpan</small>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Tgl. Input</label>
                    <input type="text" class="form-control form-control-sm bg-light"
                           value="{{ isset($po) ? $po->created_at->format('d-m-Y') : now()->format('d-m-Y') }}" disabled>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Supplier <span class="text-danger">*</span></label>
                    <select name="produsen_id" id="selectProdusen" class="form-select form-select-sm" required>
                        <option value="">-- Pilih Supplier --</option>
                        @foreach($produsenList as $p)
                        <option value="{{ $p->id }}"
                            {{ (isset($po) && $po->produsen_id == $p->id) ? 'selected' : '' }}>
                            {{ $p->kode }} — {{ $p->nama }}
                        </option>
                        @endforeach
                    </select>
                    <div class="invalid-feedback" id="err_produsen_id"></div>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Tanggal PO <span class="text-danger">*</span></label>
                    <input type="text" name="tanggal_po" id="tanggalPO" class="form-control form-control-sm flatpickr"
                           placeholder="dd-mm-yyyy" required
                           value="{{ isset($po) ? $po->tanggal_po->format('d-m-Y') : now()->format('d-m-Y') }}">
                    <div class="invalid-feedback" id="err_tanggal_po"></div>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Estimasi Tiba</label>
                    <input type="text" name="tanggal_estimasi" id="tanggalEstimasi" class="form-control form-control-sm flatpickr"
                           placeholder="dd-mm-yyyy"
                           value="{{ isset($po) && $po->tanggal_estimasi ? $po->tanggal_estimasi->format('d-m-Y') : '' }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Masa Berlaku <small class="text-muted fw-normal">(hari)</small></label>
                    <input type="number" id="masaBerlaku" name="masa_berlaku" class="form-control form-control-sm"
                           min="1" max="9999" placeholder="cth: 30"
                           value="{{ isset($po) && $po->masa_berlaku ? $po->masa_berlaku : '' }}"
                           oninput="hitungTglMasaBerlaku()">
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Tgl Akhir PO</label>
                    <input type="text" id="tglMasaBerlaku" class="form-control form-control-sm bg-light" readonly
                           placeholder="—"
                           value="{{ isset($po) && $po->tgl_masa_berlaku ? $po->tgl_masa_berlaku->format('d-m-Y') : '' }}">
                </div>
                <div class="col-12">
                    <label class="form-label fw-semibold">Catatan</label>
                    <textarea name="catatan" class="form-control form-control-sm" rows="2"
                              placeholder="Catatan tambahan (opsional)">{{ $po->catatan ?? '' }}</textarea>
                </div>
            </div>
        </div>
    </div>

    {{-- ══ Tabel Barang ═══════════════════════════════════════════ --}}
    <div class="card custom-card mb-3">
        <div class="card-header">
            <div class="card-title mb-0"><i class="bx bx-package me-2 text-primary"></i>Daftar Barang yang Dipesan</div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="tblItems" class="table mb-0" style="width:100%">
                    <thead>
                        <tr>
                            <th class="text-center" style="width:36px">No</th>
                            <th style="min-width:200px">Barang</th>
                            <th style="width:130px">Jenis</th>
                            <th class="text-center" style="width:70px">Satuan</th>
                            <th class="text-center" style="width:68px">Qty</th>
                            <th class="text-center" style="width:72px">Stok</th>
                            <th class="text-center" style="width:80px">Jual. 3bln</th>
                            <th class="text-center" style="width:105px">Tgl. ED</th>
                            <th style="width:130px">Harga Beli</th>
                            <th class="text-end" style="width:160px">Subtotal</th>
                            <th class="text-center" style="width:46px">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyItems">
                        {{-- Item rows rendered by JS --}}
                    </tbody>

                    {{-- ── Baris inline tambah ── --}}
                    <tbody id="tbodyInline">
                        <tr id="trInlineAdd">
                            <td class="text-center text-muted" style="width:36px">+</td>
                            {{-- Pilih barang --}}
                            <td>
                                <div class="d-flex gap-1 align-items-center" style="width:100%;overflow:hidden">
                                    <div style="flex:1;min-width:0;overflow:hidden">
                                        <select id="inlineBarang" class="form-select select2-barang" style="width:100%">
                                            <option value="">Ketik kode atau nama barang...</option>
                                        </select>
                                    </div>
                                    <button type="button" class="btn btn-outline-secondary btn-sm px-2 flex-shrink-0"
                                            onclick="openBrowse()" title="Cari & lihat detail barang">
                                        <i class="bx bx-search-alt"></i>
                                    </button>
                                    <button type="button" id="btnRiwayatInline" class="btn btn-outline-info btn-sm px-2 flex-shrink-0 d-none"
                                            onclick="lihatRiwayat()" title="Lihat riwayat PO barang ini">
                                        <i class="bx bx-history"></i>
                                    </button>
                                </div>
                            </td>
                            {{-- Info otomatis --}}
                            <td><span id="inlineJenis" class="chip-info text-muted">—</span></td>
                            <td class="text-center">
                                <span id="inlineSatuan" class="chip-info text-muted">—</span>
                            </td>
                            {{-- Input --}}
                            <td>
                                <input type="number" id="inlineQty" class="form-control inline-ctrl text-center" min="1" value="1" style="width:60px">
                            </td>
                            <td class="text-center">
                                <span id="inlineStok" class="chip-info text-muted">—</span>
                            </td>
                            <td class="text-center">
                                <span id="inlineAktivitas" class="chip-info text-muted">—</span>
                            </td>
                            <td>
                                <input type="text" id="inlineTglEd" class="form-control inline-ctrl text-center flatpickr-tgled" placeholder="dd-mm-yyyy" readonly style="width:95px">
                            </td>
                            <td>
                                <input type="text" id="inlineHarga" class="form-control inline-ctrl inline-ctrl-right" placeholder="0" style="width:120px">
                                <small id="hargaSumber" class="text-muted d-block" style="font-size:10px;min-height:14px"></small>
                            </td>
                            <td></td>
                            {{-- Tombol tambah --}}
                            <td class="text-center">
                                <button type="button" class="btn btn-primary btn-sm px-2" onclick="tambahItem()" title="Tambahkan ke list">
                                    <i class="bx bx-plus"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>

                    <tfoot>
                        <tr>
                            <td colspan="9" class="text-end pe-3 text-muted">Subtotal</td>
                            <td id="tdSubtotal" class="text-end pe-3 text-muted">Rp 0</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="9" class="text-end pe-3 text-muted">DPP (11/12 × Subtotal)</td>
                            <td id="tdDpp" class="text-end pe-3 text-muted">Rp 0</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="9" class="text-end pe-3 text-muted">PPN 12%</td>
                            <td id="tdPpn" class="text-end pe-3 text-muted">Rp 0</td>
                            <td></td>
                        </tr>
                        <tr class="fw-semibold">
                            <td colspan="9" class="text-end pe-3">
                                Total Harga
                                <button type="button" id="btnResetTotal" class="btn btn-link btn-sm p-0 ms-2 text-muted d-none" onclick="resetTotal()" title="Kembalikan ke kalkulasi otomatis" style="font-size:.75rem">↺ otomatis</button>
                            </td>
                            <td class="text-end pe-2">
                                <input type="text" id="inputTotal" class="form-control form-control-sm text-end fw-semibold"
                                       style="width:140px;margin-left:auto" placeholder="0"
                                       oninput="onTotalInput(this.value)" onblur="onTotalBlur(this.value)">
                            </td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div id="alertItemsEmpty" class="alert alert-warning m-3 d-none">
                <i class="bx bx-error-circle me-2"></i> Belum ada barang. Pilih barang pada baris di atas lalu klik <strong>+</strong>.
            </div>
        </div>
    </div>

    {{-- ══ Tombol Aksi ════════════════════════════════════════════ --}}
    <div class="d-flex gap-2 justify-content-end mb-4">
        <a href="{{ route('pengadaan.po.index') }}" class="btn btn-secondary">Batal</a>
        @if(!isset($po) || $po->isDraft())
        <button type="button" class="btn btn-outline-primary" onclick="submitForm('draft')">
            <i class="bx bx-save me-1"></i> Simpan Draft
        </button>
        @endif
        <button type="button" class="btn btn-primary" onclick="submitForm('diajukan')">
            <i class="bx bx-send me-1"></i> Ajukan PO
        </button>
    </div>

    </form>
</div>

{{-- ══════════════ MODAL BROWSE BARANG ═══════════════════════════ --}}
<div class="modal fade" id="modalBrowse" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bx bx-search-alt me-2"></i>Cari Barang</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-2 mb-3">
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold">Jenis Barang</label>
                        <select id="browseJenis" class="form-select form-select-sm" data-placeholder="Semua Jenis">
                            <option value=""></option>
                            @foreach($jenisList as $j)
                            <option value="{{ $j->id }}">{{ $j->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-semibold">Merek</label>
                        <select id="browseMerek" class="form-select form-select-sm" data-placeholder="Semua Merek">
                            <option value=""></option>
                            @foreach($merekList as $m)
                            <option value="{{ $m->id }}">{{ $m->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-semibold">Ukuran</label>
                        <select id="browseUkuran" class="form-select form-select-sm" data-placeholder="Semua Ukuran">
                            <option value=""></option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small fw-semibold">Cari Nama / Kode</label>
                        <input type="text" id="browseCari" class="form-control form-select-sm" placeholder="Ketik nama atau kode...">
                    </div>
                </div>
                <div class="table-responsive" style="max-height:380px;overflow-y:auto">
                    <table id="tblBrowse" class="table table-hover table-bordered mb-0">
                        <thead>
                            <tr>
                                <th style="width:80px">Kode</th>
                                <th style="min-width:200px">Nama Barang</th>
                                <th style="width:130px">Jenis</th>
                                <th style="width:110px">Merek</th>
                                <th style="width:80px">Ukuran</th>
                                <th class="text-center" style="width:80px">Satuan</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyBrowse">
                            <tr><td colspan="6" class="text-center text-muted py-3">
                                <i class="bx bx-loader-alt bx-spin me-1"></i> Memuat data...
                            </td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <small class="text-muted me-auto">Klik baris untuk memilih barang</small>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- ══════════════ MODAL RIWAYAT PO BARANG ═══════════════════════ --}}
<div class="modal fade" id="modalRiwayat" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title fw-semibold"><i class="bx bx-history me-2 text-primary"></i>Riwayat PO — <span id="riwayatNamaBarang"></span></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-3">
                <div id="riwayatLoading" class="text-center py-4 text-muted">
                    <i class="bx bx-loader-alt bx-spin me-1"></i> Memuat...
                </div>
                <div id="riwayatWrap" class="d-none">
                    {{-- Tabel riwayat PO --}}
                    <div class="table-responsive rounded border">
                        <table class="table table-hover table-bordered mb-0" style="font-size:.83rem">
                            <thead style="background:#f8f5ff;color:#7c3aed">
                                <tr>
                                    <th class="px-3 py-2">No. PO</th>
                                    <th class="px-3 py-2">Tgl. PO</th>
                                    <th class="px-3 py-2">Supplier</th>
                                    <th class="px-3 py-2">Status</th>
                                    <th class="px-3 py-2 text-center">Qty</th>
                                    <th class="px-3 py-2 text-center">Satuan</th>
                                    <th class="px-3 py-2 text-end">Harga Beli</th>
                                    <th class="px-3 py-2 text-end">Subtotal</th>
                                </tr>
                            </thead>
                            <tbody id="riwayatTbody"></tbody>
                        </table>
                    </div>
                    <div id="riwayatEmpty" class="text-center text-muted py-3 d-none">Belum ada riwayat PO untuk barang ini.</div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
// ── Data existing (saat edit) ─────────────────────────────────
@php
$existingItems = isset($po) ? $po->items->map(fn($i) => [
    'barang_id'   => $i->barang_id,
    'kode_barang' => $i->kode_barang,
    'nama_barang' => $i->nama_barang,
    'jenis'       => $i->jenis_barang,
    'merek'       => $i->merek_barang,
    'ukuran'      => $i->ukuran,
    'satuan_beli' => $i->satuan_beli,
    'qty'         => $i->qty,
    'tgl_ed'      => $i->tgl_ed ? \Carbon\Carbon::parse($i->tgl_ed)->format('d-m-Y') : null,
    'harga_beli'  => (float) $i->harga_beli,
    'catatan'     => $i->catatan,
])->values()->all() : [];
@endphp
const EXISTING_ITEMS   = @json($existingItems);
const IS_EDIT          = {{ isset($po) ? 'true' : 'false' }};
const EXISTING_TOTAL   = {{ isset($po) ? (float) $po->total_harga : 'null' }};
const PO_ID          = {{ $po->id ?? 'null' }};
const ROUTE_STORE    = '{{ route("pengadaan.po.store") }}';
const ROUTE_UPDATE   = IS_EDIT ? `{{ url("pengadaan/purchase-order") }}/${PO_ID}` : null;
const CSRF           = '{{ csrf_token() }}';
const CARI_URL       = '{{ route("pengadaan.po.cari-barang") }}';
const UKURAN_URL     = '{{ route("pengadaan.po.ukuran-list") }}';
const LAST_PRICE_URL = '{{ route("pengadaan.po.last-price") }}';
const HISTORY_URL    = '{{ route("pengadaan.po.history-barang") }}';
const BARANG_INFO_URL = '{{ route("pengadaan.po.barang-info") }}';

// ── State ─────────────────────────────────────────────────────
let items       = [];
let browseTimer = null;

// ── Init ──────────────────────────────────────────────────────
$(document).ready(function () {
    // Select2 produsen
    $('#selectProdusen').select2({
        dropdownParent: $('body'),
        placeholder   : '-- Pilih Supplier --',
        allowClear    : true,
        width         : '100%',
    });

    // Flatpickr
    flatpickr('#tanggalPO',       { dateFormat: 'd-m-Y', locale: 'id', onChange: hitungTglMasaBerlaku });
    flatpickr('#tanggalEstimasi', { dateFormat: 'd-m-Y', locale: 'id' });
    flatpickr('#inlineTglEd',     { dateFormat: 'd-m-Y', locale: 'id' });

    // Select2 AJAX untuk inline pilih barang
    $('#inlineBarang').select2({
        dropdownParent   : $('body'),
        placeholder      : 'Ketik kode atau nama barang...',
        allowClear       : false,
        minimumInputLength: 0,
        width            : '100%',
        containerCssClass: 's2-barang',
        templateResult   : (item) => {
            if (item.loading) return item.text;
            // Di list dropdown: tampilkan nama + merek (redup)
            const merek = item.raw?.merek && item.raw.merek !== '-' ? `<span style="color:#aaa;font-size:.78rem"> — ${item.raw.merek}</span>` : '';
            return $(`<span>${item.text}${merek}</span>`);
        },
        templateSelection: (item) => item.text,  // Di kotak pilihan: kode — nama saja
        ajax: {
            url           : CARI_URL,
            dataType      : 'json',
            delay         : 300,
            data          : (p) => ({ q: p.term ?? '' }),
            processResults: (data) => ({
                results: data.map(b => ({
                    id       : b.id,
                    text     : b.nama,
                    textFull : `${b.nama}${b.merek && b.merek !== '-' ? ' (' + b.merek + ')' : ''}`,
                    raw      : b,
                })),
            }),
            cache: true,
        },
    }).on('select2:select', function (e) {
        fillInlineFromBarang(e.params.data.raw);
    }).on('select2:clear', function () {
        clearInlineInfo();
    });


    // Pastikan kursor masuk ke kotak pencarian Select2 saat dropdown terbuka
    $('#inlineBarang').on('select2:open', function () {
        setTimeout(() => {
            const s = document.querySelector('.select2-container--open .select2-search__field');
            if (s) s.focus();
        }, 30);
    });

    // Format harga input
    $('#inlineHarga').on('input', function () {
        let v = $(this).val().replace(/\D/g, '');
        $(this).val(v ? parseInt(v, 10).toLocaleString('id-ID') : '');
    });

    // Keyboard flow: qty → harga → tambah
    $('#inlineQty').on('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); document.getElementById('inlineHarga').focus(); document.getElementById('inlineHarga').select(); }
    });
    $('#inlineHarga').on('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); tambahItem(); }
    });

    // Filter modal browse — Select2
    $('#browseJenis, #browseMerek, #browseUkuran').select2({
        dropdownParent: $('#modalBrowse'),
        width: '100%',
        allowClear: true,
        placeholder: function () { return $(this).data('placeholder'); },
    });
    $('#browseJenis').on('change', function () {
        loadBrowseUkuran(this.value);
        doBrowse();
    });
    $('#browseMerek, #browseUkuran').on('change', () => doBrowse());
    $('#browseCari').on('input', function () {
        clearTimeout(browseTimer);
        browseTimer = setTimeout(doBrowse, 350);
    });

    // Load existing items (edit mode)
    if (IS_EDIT && EXISTING_ITEMS.length) {
        items = EXISTING_ITEMS.map(i => ({...i}));
    }
    renderItems();
    // Edit mode: jika total_harga tersimpan berbeda dari kalkulasi otomatis, tandai manual
    if (IS_EDIT && EXISTING_TOTAL !== null) {
        const subtotal = items.reduce((s, i) => s + i.harga_beli * i.qty, 0);
        const autoTotal = subtotal + (subtotal * 11 / 12 * 0.12);
        if (Math.abs(EXISTING_TOTAL - autoTotal) > 0.01) {
            totalManual = true;
            document.getElementById('inputTotal').value = EXISTING_TOTAL.toLocaleString('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
            document.getElementById('btnResetTotal').classList.remove('d-none');
        }
    }
});

// ── Inline: isi info dari barang yang dipilih ─────────────────
let _inlineBarangId   = null;
let _inlineBarangNama = '';
let _inlineStok       = null;
let _inlineAktivitas  = null;

function fillInlineFromBarang(b) {
    document.getElementById('inlineJenis').textContent  = b.jenis       || '—';
    document.getElementById('inlineSatuan').textContent = b.satuan_beli || '—';

    _inlineBarangId   = b.id;
    _inlineBarangNama = b.nama || b.nama_barang || '';
    _inlineStok       = null;
    _inlineAktivitas  = null;
    document.getElementById('inlineStok').textContent      = '…';
    document.getElementById('inlineAktivitas').textContent = '…';
    document.getElementById('btnRiwayatInline').classList.remove('d-none');

    if (b.id) {
        // Fetch stok + aktivitas
        $.get(BARANG_INFO_URL, { barang_id: b.id }, function (res) {
            _inlineStok      = res.stok      ?? 0;
            _inlineAktivitas = res.aktivitas ?? 0;
            document.getElementById('inlineStok').textContent      = _inlineStok.toLocaleString('id-ID');
            document.getElementById('inlineAktivitas').textContent = _inlineAktivitas.toLocaleString('id-ID');
        });

        // Fetch harga terakhir dari supplier yang dipilih (fallback ke master harga beli)
        document.getElementById('hargaSumber').textContent = '';
        const produsenId = $('#selectProdusen').val();
        if (produsenId) {
            $.get(LAST_PRICE_URL, { barang_id: b.id, produsen_id: produsenId }, function (res) {
                if (res.harga) {
                    document.getElementById('inlineHarga').value =
                        Math.round(res.harga).toLocaleString('id-ID');
                    document.getElementById('hargaSumber').textContent =
                        res.sumber === 'master' ? '* dari data induk' : '* dari riwayat PO';
                }
            });
        }
    }

    setTimeout(() => { document.getElementById('inlineQty').focus(); document.getElementById('inlineQty').select(); }, 50);
}

function clearInlineInfo() {
    ['inlineJenis','inlineSatuan','inlineStok','inlineAktivitas'].forEach(id => {
        document.getElementById(id).textContent = '—';
    });
    _inlineBarangId   = null;
    _inlineBarangNama = '';
    _inlineStok       = null;
    _inlineAktivitas  = null;
    document.getElementById('btnRiwayatInline').classList.add('d-none');
}

// ── Riwayat PO barang ─────────────────────────────────────────
function lihatRiwayat() {
    if (!_inlineBarangId) return;
    lihatRiwayatById(_inlineBarangId, _inlineBarangNama);
}

function lihatRiwayatById(barangId, namaBarang) {
    document.getElementById('riwayatNamaBarang').textContent = namaBarang;
    document.getElementById('riwayatLoading').classList.remove('d-none');
    document.getElementById('riwayatWrap').classList.add('d-none');
    new bootstrap.Modal(document.getElementById('modalRiwayat')).show();

    const STATUS_LABEL = {
        diajukan: '<span class="badge bg-primary">Diajukan</span>',
        direvisi: '<span class="badge bg-warning text-dark">Direvisi</span>',
        disetujui: '<span class="badge bg-success">Disetujui</span>',
        diterima_sebagian: '<span class="badge bg-info text-dark">Diterima Sebagian</span>',
        selesai_diterima: '<span class="badge bg-secondary">Selesai</span>',
    };

    $.get(HISTORY_URL, { barang_id: barangId }, function (res) {
        document.getElementById('riwayatLoading').classList.add('d-none');
        document.getElementById('riwayatWrap').classList.remove('d-none');

        // ── Tabel riwayat ─────────────────────────────────────────
        const empty = document.getElementById('riwayatEmpty');
        const tbody = document.getElementById('riwayatTbody');
        const data  = res.rows || [];

        if (!data.length) {
            tbody.innerHTML = '';
            empty.classList.remove('d-none');
            return;
        }
        empty.classList.add('d-none');
        tbody.innerHTML = data.map(r => {
            const tgl = r.tanggal_po
                ? new Date(r.tanggal_po).toLocaleDateString('id-ID', { day:'2-digit', month:'short', year:'numeric' })
                : '—';
            const harga    = parseFloat(r.harga_beli)  || 0;
            const subtotal = parseFloat(r.subtotal)    || 0;
            const badge    = STATUS_LABEL[r.status] ?? `<span class="badge bg-secondary">${r.status}</span>`;
            return `<tr>
                <td class="px-3 py-2">${esc(r.nomor_po)}</td>
                <td class="px-3 py-2 text-nowrap">${tgl}</td>
                <td class="px-3 py-2">${esc(r.nama_produsen)}</td>
                <td class="px-3 py-2">${badge}</td>
                <td class="px-3 py-2 text-center">${r.qty}</td>
                <td class="px-3 py-2 text-center">${esc(r.satuan_beli)}</td>
                <td class="px-3 py-2 text-end text-nowrap">Rp ${harga.toLocaleString('id-ID')}</td>
                <td class="px-3 py-2 text-end text-nowrap">Rp ${subtotal.toLocaleString('id-ID')}</td>
            </tr>`;
        }).join('');
    });
}

function hitungTglMasaBerlaku() {
    const tglRaw = document.getElementById('tanggalPO').value;
    const hari   = parseInt(document.getElementById('masaBerlaku').value) || 0;
    const el     = document.getElementById('tglMasaBerlaku');
    if (!tglRaw || !hari) { el.value = ''; return; }
    const parts = tglRaw.split('-');
    const base  = new Date(parts[2], parts[1] - 1, parseInt(parts[0]));
    base.setDate(base.getDate() + hari);
    const dd = String(base.getDate()).padStart(2,'0');
    const mm = String(base.getMonth() + 1).padStart(2,'0');
    el.value = `${dd}-${mm}-${base.getFullYear()}`;
}

// ── Tambah item dari inline row ───────────────────────────────
function tambahItem() {
    const sel    = $('#inlineBarang').select2('data')[0];
    const qty    = parseInt(document.getElementById('inlineQty').value) || 0;
    const hRaw   = document.getElementById('inlineHarga').value.replace(/\./g, '');
    const harga  = parseFloat(hRaw) || 0;
    const tglEd  = document.getElementById('inlineTglEd').value || null;

    if (!sel || !sel.id) { showInlineError('Pilih barang terlebih dahulu.'); return; }
    if (qty < 1)          { showInlineError('Qty minimal 1.'); return; }
    if (harga <= 0)       { showInlineError('Harga beli harus diisi dan > 0.'); return; }

    // raw bisa dari Select2 AJAX atau dari pilih browse
    const b = sel.raw ?? $('#inlineBarang').data('browseRaw');
    if (!b) { showInlineError('Data barang tidak lengkap, pilih ulang.'); return; }
    items.push({
        barang_id  : b.id,
        kode_barang: b.kode,
        nama_barang: b.nama,
        jenis      : b.jenis,
        ukuran     : b.ukuran,
        satuan_beli: b.satuan_beli,
        qty,
        stok       : _inlineStok      ?? null,
        aktivitas  : _inlineAktivitas ?? null,
        tgl_ed     : tglEd,
        harga_beli : harga,
        catatan    : null,
    });

    // Reset inline row
    $('#inlineBarang').val(null).trigger('change');
    $('#inlineBarang').data('browseRaw', null);
    clearInlineInfo();
    document.getElementById('inlineQty').value   = 1;
    document.getElementById('inlineTglEd')._flatpickr.clear();
    document.getElementById('inlineHarga').value = '';
    document.getElementById('hargaSumber').textContent = '';

    renderItems();

    // Kembali fokus ke pilih barang
    setTimeout(() => $('#inlineBarang').select2('open'), 100);
}

function showInlineError(msg) {
    Swal.fire({ icon: 'warning', title: 'Perhatian', text: msg, timer: 2000, showConfirmButton: false });
}

// ── Render tabel items ────────────────────────────────────────
function renderItems() {
    const tbody = document.getElementById('tbodyItems');

    if (!items.length) {
        tbody.innerHTML = '';
        document.getElementById('alertItemsEmpty').classList.remove('d-none');
        ['tdSubtotal','tdDpp','tdPpn'].forEach(id => document.getElementById(id).textContent = 'Rp 0');
        resetTotal();
        return;
    }

    document.getElementById('alertItemsEmpty').classList.add('d-none');

    tbody.innerHTML = items.map((item, idx) => `
        <tr>
            <td class="text-center">${idx + 1}</td>
            <td>
                <div class="d-flex align-items-center gap-1">
                    <div style="flex:1;min-width:0">
                        <div class="fw-semibold">${esc(item.nama_barang)}</div>
                        <div class="text-muted" style="font-size:.78rem">${esc(item.kode_barang)}</div>
                    </div>
                    <button type="button" class="btn btn-outline-info btn-sm px-2 flex-shrink-0"
                            onclick="lihatRiwayatById(${item.barang_id}, '${esc(item.nama_barang)}')"
                            title="Lihat riwayat PO">
                        <i class="bx bx-history"></i>
                    </button>
                </div>
            </td>
            <td>${esc(item.jenis || '—')}</td>
            <td class="text-center">${esc(item.satuan_beli)}</td>
            <td class="text-center">
                <input type="number" class="form-control inline-ctrl text-center" min="1"
                       value="${item.qty}" onchange="updateQty(${idx}, this.value)" style="width:60px;margin:0 auto">
            </td>
            <td class="text-center text-muted" style="font-size:.8rem">
                ${item.stok != null ? Number(item.stok).toLocaleString('id-ID') : '—'}
            </td>
            <td class="text-center text-muted" style="font-size:.8rem">
                ${item.aktivitas != null ? Number(item.aktivitas).toLocaleString('id-ID') : '—'}
            </td>
            <td class="text-center">
                <input type="text" class="form-control inline-ctrl text-center flatpickr-row"
                       value="${item.tgl_ed || ''}" placeholder="dd-mm-yyyy" readonly
                       onchange="updateTglEd(${idx}, this.value)" style="width:95px;margin:0 auto">
            </td>
            <td>
                <input type="text" class="form-control inline-ctrl inline-ctrl-right"
                       value="${formatRp(item.harga_beli)}" onchange="updateHarga(${idx}, this.value)" style="width:120px">
            </td>
            <td class="text-end pe-2 fw-semibold">${formatRpStr(item.harga_beli * item.qty)}</td>
            <td class="text-center">
                <button type="button" class="btn btn-danger btn-sm px-2" onclick="hapusItem(${idx})" title="Hapus">
                    <i class="bx bx-trash"></i>
                </button>
            </td>
        </tr>
    `).join('');

    updateTotal();

    // Init flatpickr untuk setiap baris tgl ED
    document.querySelectorAll('.flatpickr-row').forEach(el => {
        if (!el._flatpickr) flatpickr(el, { dateFormat: 'd-m-Y', locale: 'id' });
    });
}

function updateQty(idx, val) {
    items[idx].qty = Math.max(1, parseInt(val) || 1);
    renderItems();
}

function updateTglEd(idx, val) {
    items[idx].tgl_ed = val || null;
}

function updateHarga(idx, val) {
    items[idx].harga_beli = parseFloat(val.replace(/\./g, '').replace(',', '.')) || 0;
    renderItems();
}


function hapusItem(idx) {
    items.splice(idx, 1);
    renderItems();
}

let totalManual = false;

function fmtRp(n) {
    return 'Rp ' + n.toLocaleString('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
}

function updateTotal() {
    const subtotal = items.reduce((s, i) => s + i.harga_beli * i.qty, 0);
    const dpp      = subtotal * 11 / 12;
    const ppn      = dpp * 0.12;
    const auto     = subtotal + ppn;
    document.getElementById('tdSubtotal').textContent = fmtRp(subtotal);
    document.getElementById('tdDpp').textContent      = fmtRp(dpp);
    document.getElementById('tdPpn').textContent      = fmtRp(ppn);
    if (!totalManual) {
        document.getElementById('inputTotal').value = auto.toLocaleString('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
    }
}

function onTotalInput(val) {
    const raw = val.replace(/\./g, '').replace(',', '.');
    totalManual = raw !== '';
    document.getElementById('btnResetTotal').classList.toggle('d-none', !totalManual);
}

function onTotalBlur(val) {
    const raw = parseFloat(val.replace(/\./g, '').replace(',', '.'));
    if (!isNaN(raw)) {
        document.getElementById('inputTotal').value = raw.toLocaleString('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
    }
}

function resetTotal() {
    totalManual = false;
    document.getElementById('btnResetTotal').classList.add('d-none');
    updateTotal();
}

function getTotalValue() {
    const raw = document.getElementById('inputTotal').value.replace(/\./g, '').replace(',', '.');
    return parseFloat(raw) || 0;
}

// ── Modal Browse ──────────────────────────────────────────────
function openBrowse() {
    $('#browseJenis, #browseMerek, #browseUkuran').val('');
    document.getElementById('browseCari').value = '';
    loadBrowseUkuran('');
    new bootstrap.Modal(document.getElementById('modalBrowse')).show();
    doBrowse();
}

function loadBrowseUkuran(jenisId) {
    const $sel = $('#browseUkuran');
    const prev = $sel.val();
    $sel.empty().append('<option value=""></option>');
    $.get(UKURAN_URL, jenisId ? { jenis_id: jenisId } : {}, function (data) {
        data.forEach(u => $sel.append(new Option(u, u, false, u === prev)));
        $sel.trigger('change.select2');
    });
}

function doBrowse() {
    const q      = document.getElementById('browseCari').value;
    const jenis  = document.getElementById('browseJenis').value;
    const merek  = document.getElementById('browseMerek').value;
    const ukuran = document.getElementById('browseUkuran').value;

    document.getElementById('tbodyBrowse').innerHTML =
        '<tr><td colspan="6" class="text-center text-muted py-3"><i class="bx bx-loader-alt bx-spin me-1"></i>Memuat...</td></tr>';

    $.get(CARI_URL, { q, jenis_id: jenis, merek_id: merek, ukuran }, function (data) {
        const tbody = document.getElementById('tbodyBrowse');
        if (!data.length) {
            tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3">Barang tidak ditemukan.</td></tr>';
            return;
        }
        tbody.innerHTML = data.map(b => `
            <tr onclick="pilihDariBrowse(${JSON.stringify(b).replace(/"/g,'&quot;')})">
                <td>${esc(b.kode)}</td>
                <td>${esc(b.nama)}</td>
                <td>${esc(b.jenis)}</td>
                <td>${esc(b.merek)}</td>
                <td>${esc(b.ukuran || '—')}</td>
                <td class="text-center">${esc(b.satuan_beli)}</td>
            </tr>
        `).join('');
    });
}

function pilihDariBrowse(b) {
    bootstrap.Modal.getInstance(document.getElementById('modalBrowse')).hide();

    // Tambahkan option ke Select2 dan pilih
    if ($('#inlineBarang').find(`option[value="${b.id}"]`).length === 0) {
        const label = b.nama;
        $('#inlineBarang').append(new Option(label, b.id, true, true));
    } else {
        $('#inlineBarang').val(b.id).trigger('change');
    }

    // Simpan raw agar tambahItem() bisa akses
    $('#inlineBarang').data('browseRaw', b);
    fillInlineFromBarang(b);
}

// ── Submit form ───────────────────────────────────────────────
function submitForm(action) {
    document.querySelectorAll('[id^="err_"]').forEach(el => el.textContent = '');

    const errors = {};
    if (!$('#selectProdusen').val()) errors.produsen_id = 'Supplier wajib dipilih.';
    if (!$('#tanggalPO').val())      errors.tanggal_po  = 'Tanggal PO wajib diisi.';

    if (Object.keys(errors).length) {
        for (const [k, msg] of Object.entries(errors)) {
            const el = document.getElementById('err_' + k);
            if (el) el.textContent = msg;
        }
        return;
    }

    if (!items.length) {
        Swal.fire('Peringatan', 'Belum ada barang yang ditambahkan.', 'warning');
        return;
    }

    const label    = action === 'diajukan' ? 'Ajukan PO ini?' : 'Simpan sebagai Draft?';
    const sublabel = action === 'diajukan' ? 'PO tidak dapat diedit setelah diajukan.' : '';

    Swal.fire({
        title: label, text: sublabel, icon: 'question',
        showCancelButton  : true,
        confirmButtonColor: '#7c3aed',
        cancelButtonColor : '#6c757d',
        confirmButtonText : 'Ya, lanjutkan',
        cancelButtonText  : 'Batal',
    }).then(res => {
        if (!res.isConfirmed) return;

        const payload = {
            _token          : CSRF,
            produsen_id     : $('#selectProdusen').val(),
            tanggal_po      : dmy2iso($('#tanggalPO').val()),
            tanggal_estimasi: dmy2iso($('#tanggalEstimasi').val()),
            masa_berlaku    : document.getElementById('masaBerlaku').value || null,
            catatan         : $('textarea[name=catatan]').val(),
            total_harga     : getTotalValue(),
            action,
            items: items.map(i => ({
                barang_id : i.barang_id,
                ukuran    : i.ukuran,
                qty       : i.qty,
                tgl_ed    : i.tgl_ed || null,
                harga_beli: i.harga_beli,
                catatan   : i.catatan,
            })),
        };
        if (IS_EDIT) payload._method = 'PUT';

        $.ajax({
            url        : IS_EDIT ? ROUTE_UPDATE : ROUTE_STORE,
            method     : 'POST',
            contentType: 'application/json',
            data       : JSON.stringify(payload),
            success    : (r) => {
                if (r.success) {
                    Swal.fire({ icon: 'success', title: 'Berhasil', text: r.message, timer: 2000, showConfirmButton: false })
                        .then(() => window.location.href = '{{ route("pengadaan.po.index") }}');
                }
            },
            error: (xhr) => {
                const errs = xhr.responseJSON?.errors ?? {};
                for (const [k, msgs] of Object.entries(errs)) {
                    const el = document.getElementById('err_' + k.replace(/\./g, '_'));
                    if (el) el.textContent = msgs[0];
                }
                Swal.fire('Validasi Gagal', xhr.responseJSON?.message ?? 'Periksa kembali isian.', 'error');
            },
        });
    });
}

// ── Helpers ───────────────────────────────────────────────────
function esc(s) {
    if (s == null) return '—';
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
function formatRp(n)    { return Math.round(n).toLocaleString('id-ID'); }
function formatRpStr(n) { return 'Rp ' + Math.round(n).toLocaleString('id-ID'); }
function dmy2iso(s)     { if (!s) return ''; const [d,m,y] = s.split('-'); return `${y}-${m}-${d}`; }
</script>
@endsection