@extends('layouts.master')

@section('title', isset($penjualan) ? 'Edit Penjualan' : 'Buat Penjualan')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    .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; }
    #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; }
    #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; }
    /* Stok chip */
    .chip-stok { display:inline-block; font-size:.72rem; padding:1px 6px; border-radius:10px; white-space:nowrap; }
    .chip-stok-ok   { background:#d1fae5; color:#065f46; }
    .chip-stok-warn { background:#fee2e2; color:#991b1b; }
    .chip-stok-none { background:#f3f4f6; color:#6b7280; }
    /* Lot chip */
    .chip-lot { display:inline-block; font-size:.72rem; padding:1px 7px; border-radius:10px; cursor:pointer; white-space:nowrap; border:1px solid transparent; }
    .chip-lot-unset     { background:#f3f4f6; color:#6b7280; border-color:#d1d5db; }
    .chip-lot-confirmed { background:#d1fae5; color:#065f46; border-color:#6ee7b7; }
    /* Modal lot tabel */
    #tblModalLots { font-size:.83rem; }
    #tblModalLots thead th { background:#f8f5ff; color:#7c3aed; border:1px solid #e9d5ff; }
    #tblModalLots tbody td { border:1px solid #f0e8ff; vertical-align:middle; }
    .lot-qty-input { width:70px; text-align:center; font-size:.82rem; padding:2px 4px; height:28px; }
    #lotTotalBar { font-size:.85rem; }
</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($penjualan) ? 'Edit Penjualan' : 'Buat Penjualan' }}</p>
            <span class="fs-13 text-muted">Penjualan &rarr; {{ isset($penjualan) ? 'Edit' : 'Buat Baru' }}</span>
        </div>
        <a href="{{ route('penjualan.index') }}" class="btn btn-secondary btn-sm mt-2 mt-md-0">
            <i class="bx bx-arrow-back me-1"></i> Kembali
        </a>
    </div>

    <form id="formPenjualan" autocomplete="off">
    @csrf

    {{-- Header --}}
    <div class="card custom-card mb-3">
        <div class="card-header">
            <div class="card-title mb-0"><i class="bx bx-receipt me-2 text-primary"></i>Informasi Penjualan</div>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Nomor Penjualan</label>
                    <input type="text" class="form-control form-control-sm bg-light"
                           value="{{ $penjualan->nomor_penjualan ?? $nomor }}" readonly>
                    <small class="text-muted">Digenerate otomatis</small>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Tgl. Transaksi</label>
                    <input type="text" id="tanggalTransaksi" class="form-control form-control-sm bg-light"
                           value="{{ isset($penjualan) ? $penjualan->tanggal_transaksi->format('d-m-Y') : now()->format('d-m-Y') }}"
                           readonly>
                    <small class="text-muted">Otomatis saat dibuat</small>
                </div>
                <div class="col-md-5">
                    <label class="form-label fw-semibold">Fasilitas Kesehatan <span class="text-danger">*</span></label>
                    <select id="selectFaskes" class="form-select form-select-sm" required>
                        <option value="">-- Pilih Faskes --</option>
                        @foreach($faskesList as $f)
                        <option value="{{ $f->id }}"
                            {{ (isset($penjualan) && $penjualan->faskes_id == $f->id) ? 'selected' : '' }}>
                            {{ $f->nama }}
                        </option>
                        @endforeach
                    </select>
                    <div class="invalid-feedback" id="err_faskes_id"></div>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold">No. PO</label>
                    <input type="text" id="inputNomorPo" class="form-control form-control-sm"
                           placeholder="Nomor PO (opsional)" maxlength="50"
                           value="{{ $penjualan->nomor_po ?? '' }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Tgl. Penjualan</label>
                    <input type="text" id="tanggalPenjualan" class="form-control form-control-sm flatpickr"
                           placeholder="dd-mm-yyyy"
                           value="{{ isset($penjualan) && $penjualan->tanggal_penjualan ? $penjualan->tanggal_penjualan->format('d-m-Y') : '' }}">
                    <div class="invalid-feedback" id="err_tanggal_penjualan"></div>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Tgl. Kirim</label>
                    <input type="text" id="tanggalKirim" class="form-control form-control-sm flatpickr"
                           placeholder="dd-mm-yyyy"
                           value="{{ isset($penjualan) && $penjualan->tanggal_kirim ? $penjualan->tanggal_kirim->format('d-m-Y') : '' }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Jatuh Tempo</label>
                    <input type="text" id="tanggalJatuhTempo" class="form-control form-control-sm flatpickr"
                           placeholder="dd-mm-yyyy"
                           value="{{ isset($penjualan) && $penjualan->tanggal_jatuh_tempo ? $penjualan->tanggal_jatuh_tempo->format('d-m-Y') : '' }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Catatan</label>
                    <textarea id="inputCatatan" class="form-control form-control-sm" rows="2"
                              placeholder="Catatan tambahan (opsional)">{{ $penjualan->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</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:180px">Barang</th>
                            <th style="width:70px">Ukuran</th>
                            <th class="text-center" style="width:60px">Satuan</th>
                            <th class="text-center" style="width:68px">Qty</th>
                            <th style="width:130px">Harga Jual</th>
                            <th class="text-end" style="width:140px">Subtotal</th>
                            <th class="text-center" style="width:120px">Stok / Lot</th>
                            <th class="text-center" style="width:42px">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyItems"></tbody>

                    {{-- Baris inline tambah --}}
                    <tbody id="tbodyInline">
                        <tr id="trInlineAdd">
                            <td class="text-center text-muted" style="width:36px">+</td>
                            <td>
                                <div class="d-flex align-items-center gap-1">
                                    <div style="flex:1;min-width:0">
                                        <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>
                                </div>
                            </td>
                            <td><span id="inlineUkuran" class="chip-info">—</span></td>
                            <td class="text-center"><span id="inlineSatuan" class="chip-info">—</span></td>
                            <td>
                                <input type="number" id="inlineQty" class="form-control inline-ctrl text-center" min="1" value="1" style="width:60px">
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-1">
                                    <input type="text" id="inlineHarga" class="form-control inline-ctrl inline-ctrl-right" placeholder="0" style="width:105px">
                                    <span id="inlineHargaWarn" class="text-warning small d-none" title="Tidak ada harga terdaftar untuk faskes ini">⚠</span>
                                </div>
                            </td>
                            <td></td>
                            <td class="text-center">
                                <span id="inlineStokChip" class="chip-stok chip-stok-none">—</span>
                            </td>
                            <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="6" class="text-end pe-3 text-muted">Subtotal</td>
                            <td id="tdSubtotal" class="text-end pe-3 text-muted">Rp 0</td>
                            <td colspan="2"></td>
                        </tr>
                        <tr>
                            <td colspan="6" 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 colspan="2"></td>
                        </tr>
                        <tr>
                            <td colspan="6" class="text-end pe-3 text-muted">PPN 12%</td>
                            <td id="tdPpn" class="text-end pe-3 text-muted">Rp 0</td>
                            <td colspan="2"></td>
                        </tr>
                        <tr class="fw-semibold">
                            <td colspan="6" 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:130px;margin-left:auto" placeholder="0"
                                       oninput="onTotalInput(this.value)" onblur="onTotalBlur(this.value)">
                            </td>
                            <td colspan="2"></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>

    {{-- Aksi --}}
    <div class="d-flex gap-2 justify-content-end mb-4">
        <a href="{{ route('penjualan.index') }}" class="btn btn-secondary">Batal</a>
        <button type="button" class="btn btn-primary" onclick="submitForm()">
            <i class="bx bx-save me-1"></i> Simpan
        </button>
    </div>

    </form>
</div>

{{-- ══ Modal Detail Lot ═══════════════════════════════════════════════════════ --}}
<div class="modal fade" id="modalLot" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <div>
                    <h6 class="modal-title mb-0" id="modalLotTitle">Detail Lot Stok</h6>
                    <div class="text-muted small" id="modalLotSubtitle"></div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div class="table-responsive">
                    <table id="tblModalLots" class="table table-bordered mb-0">
                        <thead>
                            <tr>
                                <th style="width:110px">No. Lot</th>
                                <th style="width:130px">Tgl. Kedaluwarsa</th>
                                <th class="text-center" style="width:90px">Tersedia</th>
                                <th class="text-center" style="width:100px">Qty Ambil</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyModalLots"></tbody>
                    </table>
                </div>
                <div class="px-3 py-2 border-top d-flex align-items-center gap-3" id="lotTotalBar">
                    <span>Total diambil: <strong id="lotTotalAmbil">0</strong> / <strong id="lotQtyTarget">0</strong></span>
                    <span id="lotStatusOk"   class="badge bg-success d-none">✓ Sesuai</span>
                    <span id="lotStatusKurang" class="badge bg-warning text-dark d-none">Kurang</span>
                    <span id="lotStatusLebih" class="badge bg-danger d-none">Melebihi</span>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="btnResetFEFO">
                    <i class="bx bx-refresh me-1"></i> Reset ke FEFO
                </button>
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-sm btn-success" id="btnKonfirmasiLot" disabled>
                    <i class="bx bx-check me-1"></i> Konfirmasi
                </button>
            </div>
        </div>
    </div>
</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-control-sm" placeholder="Ketik nama atau kode...">
                    </div>
                </div>
                <div class="table-responsive" style="max-height:380px;overflow-y:auto">
                    <table class="table table-hover mb-0" style="font-size:.82rem">
                        <thead>
                            <tr style="background:#f8f5ff;color:#7c3aed">
                                <th style="width:90px;border:1px solid #e9d5ff;padding:7px 10px">Kode</th>
                                <th style="min-width:200px;border:1px solid #e9d5ff;padding:7px 10px">Nama Barang</th>
                                <th style="width:130px;border:1px solid #e9d5ff;padding:7px 10px">Jenis</th>
                                <th style="width:120px;border:1px solid #e9d5ff;padding:7px 10px">Merek</th>
                                <th style="width:90px;border:1px solid #e9d5ff;padding:7px 10px">Ukuran</th>
                                <th style="width:80px;border:1px solid #e9d5ff;padding:7px 10px;text-align:center">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>
@endsection

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
@php
$existingItems = isset($penjualan) ? $penjualan->items->map(fn($i) => [
    'barang_id'  => $i->barang_id,
    'kode_barang'=> $i->kode_barang,
    'nama_barang'=> $i->nama_barang,
    'ukuran'     => $i->ukuran,
    'satuan'     => $i->satuan,
    'qty'        => $i->qty,
    'harga_jual' => (float) $i->harga_jual,
    'stok_total' => null,
    'stok_lots'  => [],
    'lots'       => $i->itemStoks->map(fn($s) => [
        'stok_id'             => $s->stok_id,
        'no_lot'              => $s->no_lot,
        'tanggal_kedaluwarsa' => $s->tanggal_kedaluwarsa?->format('d-m-Y'),
        'tanggal_kedaluwarsa_iso' => $s->tanggal_kedaluwarsa?->format('Y-m-d'),
        'qty_ambil'           => $s->qty_ambil,
        'qty_tersedia'        => $s->stok?->qty ?? 0,
    ])->values()->all(),
    'lot_confirmed' => $i->itemStoks->isNotEmpty(),
])->values()->all() : [];
@endphp

const BASE_URL       = "{{ url('/') }}";
const CSRF           = "{{ csrf_token() }}";
const IS_EDIT        = {{ isset($penjualan) ? 'true' : 'false' }};
const PJ_ID          = {{ $penjualan->id ?? 'null' }};
const EXISTING_ITEMS = @json($existingItems);
const EXISTING_TOTAL = {{ isset($penjualan) ? (float) $penjualan->total_harga : 'null' }};
const ROUTE_STORE    = '{{ route("penjualan.store") }}';
const ROUTE_UPDATE   = IS_EDIT ? `{{ url("penjualan") }}/${PJ_ID}` : null;
const ROUTE_BARANG   = '{{ route("penjualan.cari-barang") }}';
const ROUTE_HARGA    = '{{ route("penjualan.harga-jual") }}';
const ROUTE_STOK          = '{{ route("penjualan.stok-tersedia") }}';
const DEFAULT_JATUH_TEMPO = {{ $defaultJatuhTempo ?? 'null' }};

// State
let items      = [];
let totalManual = false;

// State modal lot
let modalIdx   = -1;
let modalLots  = []; // lot tersedia dari server [{id, no_lot, tanggal_kedaluwarsa, qty, ...}]

$(function () {
    const fpJatuhTempo = flatpickr('#tanggalJatuhTempo', { dateFormat: 'd-m-Y' });

    flatpickr('#tanggalPenjualan', {
        dateFormat: 'd-m-Y',
        onChange: function (selectedDates) {
            if (!DEFAULT_JATUH_TEMPO || !selectedDates.length) return;
            const d = new Date(selectedDates[0]);
            d.setDate(d.getDate() + DEFAULT_JATUH_TEMPO);
            fpJatuhTempo.setDate(d);
        },
    });

    flatpickr('#tanggalKirim', { dateFormat: 'd-m-Y' });

    $('#selectFaskes').select2({
        dropdownParent: $('body'), placeholder: '-- Pilih Faskes --', allowClear: true, width: '100%',
    }).on('select2:select select2:clear', function () {
        if (items.length) refetchAllHarga();
    });

$('#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;
            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,
        ajax: {
            url: ROUTE_BARANG, dataType: 'json', delay: 300,
            data: p => ({ q: p.term ?? '' }),
            processResults: data => ({ results: data.map(b => ({ id: b.id, text: b.nama, raw: b })) }),
            cache: true,
        },
    }).on('select2:select', function (e) {
        const b = e.params.data.raw;
        document.getElementById('inlineUkuran').textContent = b.ukuran || '—';
        document.getElementById('inlineSatuan').textContent = b.satuan || '—';
        fetchStokTersedia(b.id, function (data) {
            renderInlineStokChip(data.total, data.satuan, parseInt($('#inlineQty').val()) || 1);
        });
        fetchHarga(b.id, function (harga) {
            if (harga) {
                document.getElementById('inlineHarga').value = formatRp(harga);
                document.getElementById('inlineHargaWarn').classList.add('d-none');
            } else {
                document.getElementById('inlineHarga').value = '';
                document.getElementById('inlineHargaWarn').classList.toggle('d-none', !$('#selectFaskes').val());
            }
        });
        setTimeout(() => { $('#inlineQty').focus(); document.getElementById('inlineQty').select(); }, 50);
    }).on('select2:clear', function () {
        document.getElementById('inlineUkuran').textContent = '—';
        document.getElementById('inlineSatuan').textContent = '—';
        document.getElementById('inlineStokChip').className = 'chip-stok chip-stok-none';
        document.getElementById('inlineStokChip').textContent = '—';
    }).on('select2:open', function () {
        setTimeout(() => {
            const s = document.querySelector('.select2-container--open .select2-search__field');
            if (s) s.focus();
        }, 30);
    });

    $('#inlineQty').on('input', function () {
        const sel = $('#inlineBarang').select2('data')[0];
        if (!sel || !sel.id) return;
        const stokEl = document.getElementById('inlineStokChip');
        const total  = parseInt(stokEl.dataset.total ?? 0) || 0;
        const satuan = stokEl.dataset.satuan ?? '';
        renderInlineStokChip(total, satuan, parseInt(this.value) || 1);
    });

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

    $('#inlineQty').on('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); $('#inlineHarga').focus().select(); }
    });
    $('#inlineHarga').on('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); tambahItem(); }
    });

    // Load existing items (edit mode)
    if (IS_EDIT && EXISTING_ITEMS.length) {
        items = EXISTING_ITEMS.map(i => ({ ...i }));
        // Fetch stok tersedia untuk setiap item
        items.forEach((item, idx) => {
            fetchStokTersedia(item.barang_id, function (data) {
                items[idx].stok_total = data.total;
                items[idx].stok_lots  = data.lots;
                renderItems();
            });
        });
    }
    renderItems();

    if (IS_EDIT && EXISTING_TOTAL !== null) {
        const subtotal  = items.reduce((s, i) => s + i.harga_jual * 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', { maximumFractionDigits: 2 });
            document.getElementById('btnResetTotal').classList.remove('d-none');
        }
    }

    // Modal lot events
    document.getElementById('btnResetFEFO').addEventListener('click', applyFEFO);
    document.getElementById('btnKonfirmasiLot').addEventListener('click', konfirmasiLot);
    $(document).on('input', '.lot-qty-input', updateLotTotal);
});

// ── Stok helpers ─────────────────────────────────────────────────────────────
function fetchStokTersedia(barangId, cb) {
    $.get(ROUTE_STOK, { barang_id: barangId }, cb);
}

function fetchHarga(barangId, cb) {
    const faskesId = $('#selectFaskes').val();
    if (!faskesId) { cb(null); return; }
    $.get(ROUTE_HARGA, { faskes_id: faskesId, barang_id: barangId }, d => cb(d.harga));
}

function renderInlineStokChip(total, satuan, qty) {
    const el = document.getElementById('inlineStokChip');
    el.dataset.total  = total;
    el.dataset.satuan = satuan;
    if (total === 0) {
        el.className   = 'chip-stok chip-stok-none';
        el.textContent = 'Tdk ada stok';
    } else if (total < qty) {
        el.className   = 'chip-stok chip-stok-warn';
        el.textContent = `Tersedia: ${total} ${satuan}`;
    } else {
        el.className   = 'chip-stok chip-stok-ok';
        el.textContent = `Tersedia: ${total} ${satuan}`;
    }
}

function refetchAllHarga() {
    const faskesId = $('#selectFaskes').val();
    if (!faskesId) return;
    items.forEach((item, idx) => {
        $.get(ROUTE_HARGA, { faskes_id: faskesId, barang_id: item.barang_id }, d => {
            if (d.harga) { items[idx].harga_jual = parseFloat(d.harga); renderItems(); }
        });
    });
}

// ── Tambah item ───────────────────────────────────────────────────────────────
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;

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

    const b = sel.raw;
    if (!b) { toast('Data barang tidak lengkap, pilih ulang.'); return; }

    const stokEl = document.getElementById('inlineStokChip');
    const newItem = {
        barang_id : b.id,
        kode_barang: b.kode,
        nama_barang: b.nama,
        ukuran    : document.getElementById('inlineUkuran').textContent.replace('—', ''),
        satuan    : b.satuan,
        qty,
        harga_jual: harga,
        stok_total: parseInt(stokEl.dataset.total ?? 0) || 0,
        stok_lots : [],
        lots      : [],
        lot_confirmed: false,
    };
    items.push(newItem);
    const idx = items.length - 1;

    // Fetch lots tersedia lalu auto-sugesti FEFO
    fetchStokTersedia(b.id, function (data) {
        items[idx].stok_total = data.total;
        items[idx].stok_lots  = data.lots;
        items[idx].lots = suggestiFEFO(data.lots, qty);
        renderItems();
    });

    // Reset inline
    $('#inlineBarang').val(null).trigger('change');
    document.getElementById('inlineUkuran').textContent = '—';
    document.getElementById('inlineSatuan').textContent = '—';
    document.getElementById('inlineQty').value   = 1;
    document.getElementById('inlineHarga').value = '';
    document.getElementById('inlineHargaWarn').classList.add('d-none');
    document.getElementById('inlineStokChip').className = 'chip-stok chip-stok-none';
    document.getElementById('inlineStokChip').textContent = '—';

    renderItems();
    setTimeout(() => $('#inlineBarang').select2('open'), 100);
}

// ── FEFO suggestion ───────────────────────────────────────────────────────────
function suggestiFEFO(lots, qtyTarget) {
    const result = [];
    let sisa = qtyTarget;
    for (const lot of lots) {
        if (sisa <= 0) break;
        const ambil = Math.min(lot.qty, sisa);
        if (ambil > 0) {
            result.push({
                stok_id              : lot.id,
                no_lot               : lot.no_lot,
                tanggal_kedaluwarsa  : lot.tanggal_kedaluwarsa,
                tanggal_kedaluwarsa_iso: lot.tanggal_kedaluwarsa_iso,
                qty_ambil            : ambil,
                qty_tersedia         : lot.qty,
            });
            sisa -= ambil;
        }
    }
    return result;
}

// ── 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) => {
        // Stok chip
        let stokChip = '';
        if (item.stok_total === null || item.stok_total === undefined) {
            stokChip = `<span class="chip-stok chip-stok-none">—</span>`;
        } else if (item.stok_total === 0) {
            stokChip = `<span class="chip-stok chip-stok-warn">Tdk ada stok</span>`;
        } else if (item.stok_total < item.qty) {
            stokChip = `<span class="chip-stok chip-stok-warn">Tersedia: ${item.stok_total}</span>`;
        } else {
            stokChip = `<span class="chip-stok chip-stok-ok">Tersedia: ${item.stok_total}</span>`;
        }
        // Lot chip
        const lotTotal = item.lots.reduce((s, l) => s + (l.qty_ambil || 0), 0);
        let lotChip = '';
        if (!item.stok_lots || item.stok_lots.length === 0) {
            lotChip = `<span class="chip-lot chip-lot-unset" style="font-size:.7rem">Tdk ada lot</span>`;
        } else if (item.lot_confirmed) {
            lotChip = `<button type="button" class="chip-lot chip-lot-confirmed" onclick="bukaModalLot(${idx})">✓ ${lotTotal} dikonfirmasi</button>`;
        } else {
            const label = item.lots.length ? `${lotTotal} (saran FEFO)` : 'Lihat lot';
            lotChip = `<button type="button" class="chip-lot chip-lot-unset" onclick="bukaModalLot(${idx})">📋 ${label}</button>`;
        }
        return `
        <tr>
            <td class="text-center">${idx + 1}</td>
            <td>
                <div class="fw-semibold">${esc(item.nama_barang)}</div>
                <div class="text-muted" style="font-size:.78rem">${esc(item.kode_barang)}</div>
            </td>
            <td>${esc(item.ukuran || '—')}</td>
            <td class="text-center">${esc(item.satuan)}</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>
                <input type="text" class="form-control inline-ctrl inline-ctrl-right"
                       value="${formatRp(item.harga_jual)}" onchange="updateHarga(${idx}, this.value)" style="width:115px">
            </td>
            <td class="text-end pe-2 fw-semibold">${formatRpStr(item.harga_jual * item.qty)}</td>
            <td class="text-center">
                <div class="d-flex flex-column align-items-center gap-1">
                    ${stokChip}
                    ${lotChip}
                </div>
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-danger btn-sm px-2" onclick="hapusItem(${idx})">
                    <i class="bx bx-trash"></i>
                </button>
            </td>
        </tr>`;
    }).join('');
    updateTotal();
}

function updateQty(idx, val) {
    items[idx].qty = Math.max(1, parseInt(val) || 1);
    // Re-sugesti FEFO jika lot belum dikonfirmasi
    if (!items[idx].lot_confirmed && items[idx].stok_lots?.length) {
        items[idx].lots = suggestiFEFO(items[idx].stok_lots, items[idx].qty);
    }
    renderItems();
}
function updateHarga(idx, val) { items[idx].harga_jual = parseFloat(val.replace(/\./g,'').replace(',','.')) || 0; renderItems(); }
function hapusItem(idx)        { items.splice(idx, 1); renderItems(); }

// ── Modal Lot ─────────────────────────────────────────────────────────────────
function bukaModalLot(idx) {
    modalIdx = idx;
    const item = items[idx];

    document.getElementById('modalLotTitle').textContent  = item.nama_barang;
    document.getElementById('modalLotSubtitle').textContent =
        `Tersedia: ${item.stok_total ?? '?'} ${item.satuan} | Diminta: ${item.qty} ${item.satuan}`;
    document.getElementById('lotQtyTarget').textContent = item.qty;

    // Jika stok_lots belum ada, fetch dulu
    if (!item.stok_lots || !item.stok_lots.length) {
        fetchStokTersedia(item.barang_id, function (data) {
            items[idx].stok_total = data.total;
            items[idx].stok_lots  = data.lots;
            modalLots = data.lots;
            renderModalLots(items[idx].lots);
        });
    } else {
        modalLots = item.stok_lots;
        renderModalLots(item.lots);
    }

    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalLot')).show();
}

function renderModalLots(currentLots) {
    const tbody = document.getElementById('tbodyModalLots');

    // Build map stok_id → qty_ambil dari currentLots
    const lotMap = {};
    (currentLots || []).forEach(l => { if (l.stok_id) lotMap[l.stok_id] = l.qty_ambil || 0; });

    if (!modalLots.length) {
        tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted py-3">Tidak ada stok tersedia untuk barang ini.</td></tr>';
        updateLotTotal();
        return;
    }

    tbody.innerHTML = modalLots.map(lot => {
        const ambil = lotMap[lot.id] || 0;
        const noLot = lot.no_lot || '<span class="text-muted fst-italic">—</span>';
        const ed    = lot.tanggal_kedaluwarsa || '<span class="text-muted">—</span>';
        return `
        <tr>
            <td>${noLot}</td>
            <td>${ed}</td>
            <td class="text-center fw-semibold">${lot.qty} <small class="text-muted">${lot.satuan}</small></td>
            <td class="text-center">
                <input type="number" class="form-control lot-qty-input"
                       min="0" max="${lot.qty}" value="${ambil}"
                       data-stok-id="${lot.id}"
                       data-no-lot="${lot.no_lot ?? ''}"
                       data-ed="${lot.tanggal_kedaluwarsa ?? ''}"
                       data-ed-iso="${lot.tanggal_kedaluwarsa_iso ?? ''}"
                       data-tersedia="${lot.qty}">
            </td>
        </tr>`;
    }).join('');

    updateLotTotal();
}

function updateLotTotal() {
    const target = items[modalIdx]?.qty ?? 0;
    let total = 0;
    document.querySelectorAll('.lot-qty-input').forEach(inp => {
        const v = parseInt(inp.value) || 0;
        // Clamp ke tersedia
        const max = parseInt(inp.dataset.tersedia) || 0;
        if (v > max) { inp.value = max; }
        total += parseInt(inp.value) || 0;
    });
    document.getElementById('lotTotalAmbil').textContent = total;
    document.getElementById('lotQtyTarget').textContent  = target;

    const ok     = total === target;
    const kurang = total < target;
    const lebih  = total > target;
    document.getElementById('lotStatusOk').classList.toggle('d-none', !ok);
    document.getElementById('lotStatusKurang').classList.toggle('d-none', !kurang);
    document.getElementById('lotStatusLebih').classList.toggle('d-none', !lebih);
    document.getElementById('btnKonfirmasiLot').disabled = !ok;
}

function applyFEFO() {
    if (modalIdx < 0) return;
    const qty = items[modalIdx].qty;
    let sisa = qty;
    document.querySelectorAll('.lot-qty-input').forEach(inp => {
        const tersedia = parseInt(inp.dataset.tersedia) || 0;
        const ambil    = Math.min(tersedia, sisa);
        inp.value = ambil;
        sisa -= ambil;
    });
    updateLotTotal();
}

function konfirmasiLot() {
    if (modalIdx < 0) return;
    const lots = [];
    document.querySelectorAll('.lot-qty-input').forEach(inp => {
        const ambil = parseInt(inp.value) || 0;
        if (ambil > 0) {
            lots.push({
                stok_id              : parseInt(inp.dataset.stokId),
                no_lot               : inp.dataset.noLot || null,
                tanggal_kedaluwarsa  : inp.dataset.ed || null,
                tanggal_kedaluwarsa_iso: inp.dataset.edIso || null,
                qty_ambil            : ambil,
                qty_tersedia         : parseInt(inp.dataset.tersedia) || 0,
            });
        }
    });
    items[modalIdx].lots = lots;
    items[modalIdx].lot_confirmed = true;

    bootstrap.Modal.getInstance(document.getElementById('modalLot')).hide();
    renderItems();
}

// ── Total ─────────────────────────────────────────────────────────────────────
function fmtRp(n) { return 'Rp ' + n.toLocaleString('id-ID', { minimumFractionDigits:0, maximumFractionDigits:2 }); }
function formatRp(n)    { return Math.round(n).toLocaleString('id-ID'); }
function formatRpStr(n) { return 'Rp ' + Math.round(n).toLocaleString('id-ID'); }

function updateTotal() {
    const subtotal = items.reduce((s, i) => s + i.harga_jual * 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', { maximumFractionDigits: 2 });
    }
}

function onTotalInput(val) {
    totalManual = val.replace(/\./g,'').replace(',','') !== '';
    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', { maximumFractionDigits: 2 });
}
function resetTotal() {
    totalManual = false;
    document.getElementById('btnResetTotal').classList.add('d-none');
    updateTotal();
}
function getTotalValue() {
    return parseFloat(document.getElementById('inputTotal').value.replace(/\./g,'').replace(',','.')) || 0;
}

// ── Submit ────────────────────────────────────────────────────────────────────
function submitForm() {
    const faskesId = $('#selectFaskes').val();
    document.querySelectorAll('[id^="err_"]').forEach(el => el.textContent = '');

    const errors = {};
    if (!faskesId) errors.faskes_id = 'Faskes wajib dipilih.';
    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; }

    Swal.fire({
        title: IS_EDIT ? 'Simpan perubahan?' : 'Simpan penjualan?',
        icon: 'question', showCancelButton: true,
        confirmButtonColor: '#7c3aed', cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, simpan', cancelButtonText: 'Batal',
    }).then(res => {
        if (!res.isConfirmed) return;
        const payload = {
            _token              : CSRF,
            faskes_id           : faskesId,
            nomor_po            : document.getElementById('inputNomorPo').value || null,
            tanggal_penjualan   : dmy2iso(document.getElementById('tanggalPenjualan').value),
            tanggal_kirim       : dmy2iso(document.getElementById('tanggalKirim').value),
            tanggal_jatuh_tempo : dmy2iso(document.getElementById('tanggalJatuhTempo').value),
            catatan             : document.getElementById('inputCatatan').value,
            total_harga         : getTotalValue(),
            items: items.map(i => ({
                barang_id : i.barang_id,
                qty       : i.qty,
                harga_jual: i.harga_jual,
                lots      : i.lots || [],
            })),
        };
        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:'Penjualan disimpan.', timer:1800, showConfirmButton:false })
                        .then(() => window.location.href = r.redirect ?? BASE_URL + '/penjualan');
                }
            },
            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 dmy2iso(s) { if (!s) return ''; const [d,m,y] = s.split('-'); return `${y}-${m}-${d}`; }
function toast(msg) { Swal.fire({ icon:'warning', title:'Perhatian', text:msg, timer:2000, showConfirmButton:false }); }

// ── Modal Browse Barang ───────────────────────────────────────────────────────
const BROWSE_URL = '{{ route("penjualan.cari-barang") }}';
const UKURAN_URL = '{{ route("penjualan.ukuran-list") }}';
let browseTimer  = null;

$(function () {
    $('#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);
    });
});

function openBrowse() {
    $('#browseJenis, #browseMerek, #browseUkuran').val(null).trigger('change');
    $('#browseCari').val('');
    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      = $('#browseCari').val();
    const jenis  = $('#browseJenis').val();
    const merek  = $('#browseMerek').val();
    const ukuran = $('#browseUkuran').val();
    $('#tbodyBrowse').html('<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(BROWSE_URL, { q, jenis_id: jenis, merek_id: merek, ukuran }, function (data) {
        if (!data.length) {
            $('#tbodyBrowse').html('<tr><td colspan="6" class="text-center text-muted py-3">Barang tidak ditemukan.</td></tr>');
            return;
        }
        const e = s => $('<div>').text(s ?? '—').html();
        $('#tbodyBrowse').html(data.map(b => `
            <tr onclick='pilihDariBrowse(${JSON.stringify(b).replace(/'/g,"&#39;")})' style="cursor:pointer">
                <td style="border:1px solid #f0e8ff;padding:5px 8px">${e(b.kode)}</td>
                <td style="border:1px solid #f0e8ff;padding:5px 8px">${e(b.nama)}</td>
                <td style="border:1px solid #f0e8ff;padding:5px 8px">${e(b.jenis)}</td>
                <td style="border:1px solid #f0e8ff;padding:5px 8px">${e(b.merek)}</td>
                <td style="border:1px solid #f0e8ff;padding:5px 8px">${e(b.ukuran || '—')}</td>
                <td style="border:1px solid #f0e8ff;padding:5px 8px;text-align:center">${e(b.satuan)}</td>
            </tr>`).join(''));
    });
}

function pilihDariBrowse(b) {
    bootstrap.Modal.getInstance(document.getElementById('modalBrowse')).hide();
    if ($('#inlineBarang').find(`option[value="${b.id}"]`).length === 0) {
        $('#inlineBarang').append(new Option(b.nama, b.id, true, true));
    } else {
        $('#inlineBarang').val(b.id).trigger('change');
    }
    $('#inlineBarang').trigger('select2:select', { params: { data: { id: b.id, text: b.nama, raw: b } } });
    // Set info display manual
    document.getElementById('inlineUkuran').textContent = b.ukuran || '—';
    document.getElementById('inlineSatuan').textContent = b.satuan || '—';
    fetchStok(b.id);
    setTimeout(() => { document.getElementById('inlineQty').focus(); document.getElementById('inlineQty').select(); }, 100);
}
</script>
@endsection