@extends('layouts.master')

@section('title', isset($faktur) ? 'Edit Faktur' : 'Buat Faktur Penjualan KSO')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    .pemakaian-item { padding:10px 14px; border-bottom:1px solid #f3eeff; cursor:pointer; transition:.15s; }
    .pemakaian-item:last-child { border-bottom:none; }
    .pemakaian-item:hover { background:#faf5ff; }
    .pemakaian-item input[type=checkbox] { margin-right:8px; accent-color:#7c3aed; }
    .pemakaian-item.selected { background:#f0e8ff; }
    .preview-table thead th { background:#f8f5ff; color:#7c3aed; font-size:.8rem; border:1px solid #e9d5ff; padding:6px 8px; }
    .preview-table tbody td { font-size:.82rem; border:1px solid #f0e8ff; padding:5px 8px; vertical-align:middle; }
    #pemakaianModalList { max-height:55vh; overflow-y:auto; border:1px solid #e9d5ff; border-radius:8px; }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="d-flex align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">{{ isset($faktur) ? 'Edit Faktur' : 'Buat Faktur Penjualan KSO' }}</p>
            <span class="fs-13 text-muted">Penjualan &rarr; <a href="{{ route('penjualan.faktur-kso.index') }}">Penjualan KSO</a> &rarr; {{ isset($faktur) ? $faktur->nomor : 'Baru' }}</span>
        </div>
    </div>

    <form id="formFaktur">
    <div class="row g-3">
        {{-- Informasi Faktur — full width --}}
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title mb-0">Informasi Faktur</div>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">No. Faktur</label>
                            <input type="text" id="nomorFaktur" class="form-control form-control-sm" value="{{ $faktur->nomor ?? '—' }}" readonly>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Faskes KSO <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 }}" data-kode="{{ strtoupper($f->kode) }}"
                                    {{ isset($faktur) && $faktur->faskes_id == $f->id ? 'selected' : '' }}>
                                    {{ $f->nama }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Tanggal Faktur <span class="text-danger">*</span></label>
                            <input type="text" id="tanggalFaktur" class="form-control form-control-sm flatpickr-date" required
                                value="{{ isset($faktur) ? $faktur->tanggal_faktur->format('d-m-Y') : now()->format('d-m-Y') }}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Tanggal Jatuh Tempo</label>
                            <input type="text" id="tglJatuhTempo" class="form-control form-control-sm flatpickr-date"
                                value="{{ isset($faktur) && $faktur->tgl_jatuh_tempo ? $faktur->tgl_jatuh_tempo->format('d-m-Y') : '' }}" placeholder="Opsional">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label fw-semibold">Jenis PPN <span class="text-danger">*</span></label>
                            <select id="selectJenisPpn" class="form-select form-select-sm">
                                <option value="belum_ppn" {{ (!isset($faktur) || $faktur->jenis_ppn === 'belum_ppn') ? 'selected' : '' }}>Belum PPN</option>
                                <option value="sudah_ppn" {{ isset($faktur) && $faktur->jenis_ppn === 'sudah_ppn' ? 'selected' : '' }}>Sudah PPN</option>
                                <option value="tanpa_ppn" {{ isset($faktur) && $faktur->jenis_ppn === 'tanpa_ppn' ? 'selected' : '' }}>Tanpa PPN</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Catatan</label>
                            <textarea id="catatan" class="form-control form-control-sm" rows="1" maxlength="500">{{ $faktur->catatan ?? '' }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Preview Item Terpilih — full width --}}
        <div class="col-12" id="previewCard">
            <div class="card custom-card">
                <div class="card-header py-2 d-flex align-items-center justify-content-between">
                    <div class="card-title mb-0 fs-14"><i class="bx bx-package me-1 text-primary"></i>Preview Item Terpilih</div>
                    <button type="button" class="btn btn-primary btn-sm" id="btnPilihPemakaian" disabled
                        onclick="bukaModalPemakaian()">
                        <i class="bx bx-list-check me-1"></i>
                        Pilih Pemakaian
                        <span id="selectedCount" class="badge bg-white text-primary ms-1 d-none">0</span>
                    </button>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table preview-table mb-0">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width:36px">No.</th>
                                    <th>Nama Barang</th>
                                    <th class="text-center" style="width:46px">Qty</th>
                                    <th class="text-center" style="width:50px">Sat.</th>
                                    <th class="text-end" style="width:120px">Harga</th>
                                    <th class="text-end" style="width:110px">Subtotal</th>
                                </tr>
                            </thead>
                            <tbody id="previewBody"></tbody>
                            <tfoot id="previewTfoot">
                                <tr>
                                    <td colspan="5" class="text-end fw-bold">Total</td>
                                    <td class="text-end fw-bold text-primary" id="previewTotal">Rp 0</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Action Buttons --}}
    <div class="d-flex gap-2 mt-3 justify-content-end">
        <a href="{{ route('penjualan.faktur-kso.index') }}" class="btn btn-secondary btn-sm">
            <i class="bx bx-arrow-back me-1"></i> Batal
        </a>
        <button type="submit" class="btn btn-primary btn-sm" id="btnSimpan">
            <i class="bx bx-save me-1"></i> Simpan Draft
        </button>
    </div>
    </form>
</div>

{{-- Modal Pilih Pemakaian --}}
<div class="modal fade" id="modalPilihPemakaian" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title fw-semibold mb-0">Pilih Pemakaian yang Akan Difaktur</h6>
                <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-3">
                <div class="d-flex align-items-center mb-2" id="modalSelectAllWrap" style="display:none!important">
                    <div class="form-check mb-0">
                        <input class="form-check-input" type="checkbox" id="chkPilihSemua" onchange="togglePilihSemua(this)">
                        <label class="form-check-label fw-semibold" for="chkPilihSemua" style="font-size:.85rem">Pilih Semua</label>
                    </div>
                    <span id="countSelected" class="ms-2 text-muted" style="font-size:.8rem"></span>
                </div>
                <div id="modalLoadingPemakaian" class="text-center py-3 d-none">
                    <div class="spinner-border spinner-border-sm text-primary"></div> Memuat data pemakaian...
                </div>
                <div id="modalEmptyPemakaian" class="alert alert-warning d-none">
                    <i class="bx bx-info-circle me-1"></i> Tidak ada pemakaian yang belum difaktur untuk faskes ini.
                </div>
                <div id="pemakaianModalList"></div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary btn-sm" id="btnKonfirmasiPilih" onclick="konfirmasiPilih()">
                    <i class="bx bx-check me-1"></i> Konfirmasi Pilihan
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    flatpickr('#tanggalFaktur', { dateFormat: 'd-m-Y', allowInput: false });
    flatpickr('#tglJatuhTempo', { dateFormat: 'd-m-Y', allowInput: false });
});
</script>
<script>
const BASE_URL  = "{{ url('/') }}";
const CSRF      = "{{ csrf_token() }}";
const IS_EDIT              = {{ isset($faktur) ? 'true' : 'false' }};
const FAKTUR_ID            = {{ $faktur->id ?? 'null' }};
const EXISTING_PEMAKAIAN_IDS = {!! isset($faktur) ? $faktur->pemakaians->pluck('id') : '[]' !!};
const DEFAULT_JATUH_TEMPO  = {{ \App\Models\CompanyProfile::current()->default_jatuh_tempo_hari ?? 'null' }};

function autoIsiJatuhTempo(tglFakturVal) {
    if (!DEFAULT_JATUH_TEMPO) return;
    const jt = document.getElementById('tglJatuhTempo');
    if (!jt) return;
    const parts = tglFakturVal.split('-');
    if (parts.length !== 3) return;
    const d = new Date(parts[2], parts[1] - 1, parseInt(parts[0]) + DEFAULT_JATUH_TEMPO);
    jt._flatpickr ? jt._flatpickr.setDate(d) : (jt.value = String(d.getDate()).padStart(2,'0') + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + d.getFullYear());
}

// Auto-isi saat tanggal faktur berubah
document.getElementById('tanggalFaktur')?.addEventListener('change', function () {
    if (this.value) autoIsiJatuhTempo(this.value);
});

// Auto-isi saat halaman pertama kali load (create mode)
if (!IS_EDIT && DEFAULT_JATUH_TEMPO) {
    const tglAwal = document.getElementById('tanggalFaktur')?.value;
    if (tglAwal) autoIsiJatuhTempo(tglAwal);
}

let pemakaianData    = [];
let selectedIds      = [...EXISTING_PEMAKAIAN_IDS];
let hargaOverrides   = {}; // {item_id: harga_jual}

// Jenis PPN change → re-render preview
$('#selectJenisPpn').on('change', function () { renderPreview(); });

// Harga editable — event delegation pada previewBody
$('#previewBody').on('input', '.harga-input', function () {
    const raw = $(this).val().replace(/\./g, '').replace(',', '.');
    const harga = parseFloat(raw) || 0;
    const itemId = parseInt($(this).data('item-id'));
    if (itemId) hargaOverrides[itemId] = harga;
    // Format angka saat ketik
    if (raw && !isNaN(harga)) $(this).val(Math.round(harga).toLocaleString('id-ID'));
    renderPreview();
}).on('focus', '.harga-input', function () {
    // Hapus format saat focus untuk mudah edit
    const raw = $(this).val().replace(/\./g, '');
    $(this).val(raw);
}).on('blur', '.harga-input', function () {
    const raw = $(this).val().replace(/\./g, '').replace(',', '.');
    const harga = parseFloat(raw) || 0;
    $(this).val(Math.round(harga).toLocaleString('id-ID'));
});

// Faskes change
$('#selectFaskes').on('change', function () {
    const faskesId = $(this).val();
    if (faskesId) {
        $('#btnPilihPemakaian').prop('disabled', false);
        if (!IS_EDIT) {
            const kode = $(this).find(':selected').data('kode') || '---';
            const ym   = '{{ now()->format("Ym") }}';
            const d    = '{{ now()->format("d") }}';
            $('#nomorFaktur').val(`FKTR/${ym}.${d}/${kode}.????`);
        }
        fetchPemakaian(faskesId);
    } else {
        $('#btnPilihPemakaian').prop('disabled', true);
        if (!IS_EDIT) $('#nomorFaktur').val('—');
        pemakaianData = [];
        selectedIds   = [];
        renderPreview();
    }
});

function bukaModalPemakaian() {
    const faskesId = $('#selectFaskes').val();
    if (!faskesId) { Swal.fire('Perhatian', 'Pilih faskes terlebih dahulu.', 'warning'); return; }
    renderModalList();
    $('#modalPilihPemakaian').modal('show');
}

function fetchPemakaian(faskesId, cb) {
    $('#modalLoadingPemakaian').removeClass('d-none');
    $('#pemakaianModalList').empty();
    $('#modalEmptyPemakaian').addClass('d-none');

    $.get(`${BASE_URL}/faktur-penjualan-kso/pemakaian-tersedia`, { faskes_id: faskesId, faktur_id: FAKTUR_ID ?? '' }, data => {
        pemakaianData = data;
        $('#modalLoadingPemakaian').addClass('d-none');
        if (!data.length) { $('#modalEmptyPemakaian').removeClass('d-none'); }
        renderModalList();
        renderPreview();
        if (cb) cb();
    });
}

function renderModalList() {
    const list = $('#pemakaianModalList');
    list.empty();
    if (!pemakaianData.length) { $('#modalSelectAllWrap').hide(); return; }

    pemakaianData.forEach(p => {
        const checked = selectedIds.includes(p.id);
        list.append(`
            <div class="pemakaian-item ${checked ? 'selected' : ''}" onclick="toggleModalItem(this)">
                <input type="checkbox" name="pemakaian_sel" value="${p.id}" ${checked ? 'checked' : ''}>
                <strong>${p.nomor}</strong> — ${p.tgl_pemakaian}
                <span class="ms-2 text-muted">${p.nama_pasien}</span>
                ${p.jenis_pasien ? `<span class="badge bg-light text-dark border ms-1">${p.jenis_pasien}</span>` : ''}
                <span class="float-end text-end">
                    <span class="fw-semibold text-primary">${p.total_before_fmt}</span>
                    <span class="text-muted" style="font-size:.75rem;display:block">+PPN: ${p.total_after_fmt}</span>
                </span>
                <div class="text-muted" style="font-size:.78rem;margin-left:1.4rem">${p.item_count} item</div>
            </div>`);
    });
    $('#modalSelectAllWrap').css('display', 'flex');
    syncPilihSemua();
}

function toggleModalItem(el) {
    $(el).toggleClass('selected');
    $(el).find('input').prop('checked', $(el).hasClass('selected'));
    syncPilihSemua();
}

function togglePilihSemua(cb) {
    const checked = cb.checked;
    $('#pemakaianModalList .pemakaian-item').each(function () {
        $(this).toggleClass('selected', checked);
        $(this).find('input').prop('checked', checked);
    });
    updateCountSelected();
}

function syncPilihSemua() {
    const total   = $('#pemakaianModalList .pemakaian-item').length;
    const checked = $('#pemakaianModalList input:checked').length;
    $('#chkPilihSemua').prop('indeterminate', checked > 0 && checked < total);
    $('#chkPilihSemua').prop('checked', checked === total && total > 0);
    updateCountSelected();
}

function updateCountSelected() {
    const checked = $('#pemakaianModalList input:checked').length;
    const total   = $('#pemakaianModalList .pemakaian-item').length;
    $('#countSelected').text(checked > 0 ? `${checked} dari ${total} dipilih` : '');
}

function konfirmasiPilih() {
    selectedIds = $('#pemakaianModalList input:checked').map((i, el) => parseInt(el.value)).get();
    renderPreview();
    $('#modalPilihPemakaian').modal('hide');
}

function renderPreview() {
    const selected = pemakaianData.filter(p => selectedIds.includes(p.id));
    const count    = selected.length;

    // Update badge on button
    if (count > 0) {
        $('#selectedCount').text(count).removeClass('d-none');
    } else {
        $('#selectedCount').addClass('d-none');
    }

    if (!selected.length) {
        $('#previewBody').html('<tr><td colspan="6" class="text-center text-muted py-3" style="font-size:.83rem"><i class="bx bx-info-circle me-1"></i>Belum ada pemakaian dipilih</td></tr>');
        $('#previewTotal').text('Rp 0');
        return;
    }

    const jenisPpn = $('#selectJenisPpn').val();
    const fmt = n => 'Rp ' + Math.round(n).toLocaleString('id-ID');

    let html = '', totalSubtotal = 0, totalDpp = 0, totalPpn = 0, totalHarga = 0;

    selected.forEach(p => {
        const badge = p.jenis_pasien ? `<span class="badge bg-secondary ms-1" style="font-size:.7rem">${p.jenis_pasien}</span>` : '';
        const isFirst = selected.indexOf(p) === 0;
        html += `<tr style="background:#f8f5ff">
            <td colspan="6" class="fw-semibold" style="font-size:.8rem;border-top:${isFirst ? '1px solid #e9d5ff' : '8px solid #f0e8ff'};padding-top:8px;padding-bottom:6px">
                ${p.nomor} — ${p.nama_pasien}${badge}
                <span class="text-muted fw-normal ms-2">${p.tgl_pemakaian}</span>
            </td>
        </tr>`;
        if (p.items && p.items.length) {
            p.items.forEach((item, i) => {
                const harga = hargaOverrides[item.id] ?? item.harga_jual;
                const subtotal = harga * item.qty;
                const dispSubtotal = jenisPpn === 'sudah_ppn' ? subtotal * 1.11 : subtotal;
                html += `<tr>
                    <td class="text-center text-muted ps-4" style="font-size:.78rem">${i + 1}</td>
                    <td>
                        ${item.nama_barang}
                        ${item.manufaktur ? `<div style="font-size:.75rem;color:#888">${item.manufaktur}</div>` : ''}
                        ${(item.jenis_nie || item.no_nie) ? `<div style="font-size:.75rem;color:#aaa">${[item.jenis_nie, item.no_nie].filter(Boolean).join(' · ')}</div>` : ''}
                    </td>
                    <td class="text-center fw-semibold">${item.qty}</td>
                    <td class="text-center text-muted small">${item.satuan || '—'}</td>
                    <td class="text-end p-1">
                        <input type="text" class="form-control form-control-sm text-end harga-input"
                               data-item-id="${item.id}"
                               value="${Math.round(harga).toLocaleString('id-ID')}"
                               style="width:110px;margin-left:auto">
                    </td>
                    <td class="text-end subtotal-cell">${fmt(dispSubtotal)}</td>
                </tr>`;
            });
        }
        // Recompute totals using overrides
        const pSubtotal = p.items.reduce((s, it) => s + (hargaOverrides[it.id] ?? it.harga_jual) * it.qty, 0);
        const pDpp      = pSubtotal * 11 / 12;
        const pPpn      = pSubtotal - pDpp;
        const pTotal    = jenisPpn === 'sudah_ppn' ? pSubtotal * 1.11 : jenisPpn === 'tanpa_ppn' ? pSubtotal : pSubtotal + pPpn;
        totalSubtotal += pSubtotal;
        totalDpp      += pDpp;
        totalPpn      += pPpn;
        totalHarga    += pTotal;
    });

    $('#previewBody').html(html);

    // Render tfoot berdasarkan jenis PPN
    let tfootHtml = '';
    if (jenisPpn === 'tanpa_ppn') {
        tfootHtml = `<tr>
            <td colspan="5" class="text-end fw-bold">Total</td>
            <td class="text-end fw-bold text-primary">${fmt(totalSubtotal)}</td>
        </tr>`;
    } else if (jenisPpn === 'sudah_ppn') {
        const afterPpn = totalSubtotal * 1.11;
        tfootHtml = `<tr>
            <td colspan="5" class="text-end fw-bold">Total</td>
            <td class="text-end fw-bold text-primary">${fmt(afterPpn)}</td>
        </tr>
        <tr><td colspan="6" class="text-end text-muted" style="font-size:.78rem;font-style:italic">Harga sudah termasuk PPN</td></tr>`;
    } else {
        // belum_ppn
        tfootHtml = `<tr>
            <td colspan="5" class="text-end">Subtotal</td>
            <td class="text-end">${fmt(totalSubtotal)}</td>
        </tr>
        <tr>
            <td colspan="4" class="text-end text-muted" style="font-size:.85rem">DPP (11/12)</td>
            <td class="text-end text-muted" style="font-size:.85rem">${fmt(totalDpp)}</td>
        </tr>
        <tr>
            <td colspan="4" class="text-end text-muted" style="font-size:.85rem">PPN 12%</td>
            <td class="text-end text-muted" style="font-size:.85rem">${fmt(totalPpn)}</td>
        </tr>
        <tr>
            <td colspan="5" class="text-end fw-bold">Total</td>
            <td class="text-end fw-bold text-primary">${fmt(totalHarga)}</td>
        </tr>`;
    }
    $('#previewTfoot').html(tfootHtml);
}

// Submit
$('#formFaktur').on('submit', function (e) {
    e.preventDefault();
    if (!selectedIds.length) { Swal.fire('Perhatian', 'Pilih minimal 1 pemakaian.', 'warning'); return; }
    if (!$('#selectFaskes').val()) { Swal.fire('Perhatian', 'Pilih faskes terlebih dahulu.', 'warning'); return; }

    const payload = {
        _token:         CSRF,
        faskes_id:      $('#selectFaskes').val(),
        tanggal_faktur:   $('#tanggalFaktur').val(),
        tgl_jatuh_tempo:  $('#tglJatuhTempo').val(),
        jenis_ppn:      $('#selectJenisPpn').val(),
        catatan:        $('#catatan').val(),
        pemakaian_ids:    selectedIds,
        harga_overrides:  hargaOverrides,
    };

    const url    = IS_EDIT ? `${BASE_URL}/faktur-penjualan-kso/${FAKTUR_ID}` : `${BASE_URL}/faktur-penjualan-kso`;
    const method = IS_EDIT ? 'PUT' : 'POST';

    $('#btnSimpan').prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Menyimpan...');

    $.ajax({
        url, method, data: payload,
        success: r => {
            if (r.success) {
                Swal.fire({ icon:'success', title:'Tersimpan', timer:1200, showConfirmButton:false })
                    .then(() => window.location.href = `${BASE_URL}/faktur-penjualan-kso/${r.id ?? FAKTUR_ID}`);
            }
        },
        error: xhr => {
            $('#btnSimpan').prop('disabled', false).html('<i class="bx bx-save me-1"></i> Simpan Draft');
            Swal.fire('Gagal', xhr.responseJSON?.message ?? 'Terjadi kesalahan.', 'error');
        },
    });
});

// Init on edit
@if(isset($faktur))
$('#selectFaskes').trigger('change');
@endif
</script>
@endsection