<div class="hero">
    <div>
        <h2 style="margin:0 0 6px;">Pengaturan Poin Membership</h2>
        <p style="margin:0; opacity:0.95;">Atur sendiri berapa rupiah belanja yang setara dengan 1 poin.</p>
    </div>
</div>

<div class="panel" style="max-width:520px;">
    <div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
        <div>
            <h3 style="margin:0;">Status Fitur Poin</h3>
            <p class="muted" style="margin:4px 0 0;">Jika dinonaktifkan, member tidak akan mendapat maupun bisa menukar poin di transaksi baru.</p>
        </div>
        <label style="display:inline-flex; align-items:center; gap:8px; width:auto; min-height:0; cursor:pointer;">
            <span id="pointsStatusLabel" class="pill" style="margin:0; background:<?= $pointsFeatureEnabled ? '#dcfce7' : '#fee2e2' ?>; color:<?= $pointsFeatureEnabled ? '#166534' : '#991b1b' ?>;"><?= $pointsFeatureEnabled ? 'Aktif' : 'Nonaktif' ?></span>
            <input type="checkbox" id="pointsEnabledToggle" style="width:20px; height:20px; min-height:0;" <?= $pointsFeatureEnabled ? 'checked' : '' ?> onchange="togglePointsFeature(this)">
        </label>
    </div>
</div>

<div class="panel" style="max-width:520px;">
    <h3 style="margin-top:0;">Aturan Poin</h3>
    <p class="muted" style="margin-top:0;">Setiap transaksi dengan Member terpilih akan otomatis mendapat poin sesuai aturan ini. Contoh: kalau diisi 10.000, maka belanja Rp 60.000 = 6 poin.</p>
    <form id="pointsSettingForm" method="post" action="/owner/save-settings-points">
        <input type="hidden" name="points_enabled" id="pointsEnabledField" value="<?= $pointsFeatureEnabled ? '1' : '' ?>">
        <div class="form-grid" style="grid-template-columns:1fr;">
            <div>
                <label for="rupiahPerPointDisplay" class="muted" style="display:block; font-size:12px; margin-bottom:6px;">1 Poin setara dengan berapa rupiah?</label>
                <input type="hidden" name="rupiah_per_point" id="rupiahPerPoint" value="<?= esc($rupiahPerPoint) ?>">
                <input type="text" inputmode="numeric" id="rupiahPerPointDisplay" placeholder="Rp 10.000">
            </div>
        </div>
        <button class="btn-primary" type="submit" style="margin-top:6px;">Simpan Pengaturan</button>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.swal2-container { z-index: 10050 !important; }
</style>
<script>
function formatRupiahDisplay(digits) {
    if (!digits) return '';
    return 'Rp ' + digits.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
}

const rupiahHidden = document.getElementById('rupiahPerPoint');
const rupiahDisplay = document.getElementById('rupiahPerPointDisplay');
rupiahDisplay.value = formatRupiahDisplay(rupiahHidden.value);

rupiahDisplay.addEventListener('input', function () {
    const digits = this.value.replace(/\D/g, '');
    rupiahHidden.value = digits;
    this.value = formatRupiahDisplay(digits);
});

document.getElementById('pointsSettingForm').addEventListener('submit', function (e) {
    e.preventDefault();
    const formData = new FormData(this);
    fetch(this.action, { method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(r => r.json())
        .then((res) => {
            Swal.fire(res.success ? 'Berhasil' : 'Gagal', res.message || '', res.success ? 'success' : 'error');
        });
});

function togglePointsFeature(checkbox) {
    const enabled = checkbox.checked;
    document.getElementById('pointsEnabledField').value = enabled ? '1' : '';
    const label = document.getElementById('pointsStatusLabel');
    label.textContent = enabled ? 'Aktif' : 'Nonaktif';
    label.style.background = enabled ? '#dcfce7' : '#fee2e2';
    label.style.color = enabled ? '#166534' : '#991b1b';

    const formData = new FormData();
    formData.append('rupiah_per_point', document.getElementById('rupiahPerPoint').value);
    formData.append('points_enabled', enabled ? '1' : '');
    fetch('/owner/save-settings-points', { method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(r => r.json())
        .then((res) => {
            Swal.fire({ toast: true, position: 'top-end', timer: 1800, showConfirmButton: false, icon: res.success ? 'success' : 'error', title: enabled ? 'Fitur Poin Diaktifkan' : 'Fitur Poin Dinonaktifkan' });
        });
}
</script>
