{{-- Partial: _milestone_js.blade.php --}}
<script>
var milestoneIndex = {{ isset($plan) ? $plan->milestones->count() : 0 }};

// ── Type → which sub-fields to show ────────────────────────────
var typeFields = {
    down_payment:     [],
    installment:      ['installment'],
    on_completion:    ['due'],
    on_handover:      ['due'],
    rental_guarantee: [],
    custom:           ['due'],
};

function onTypeChange(select) {
    var row    = select.closest('.milestone-row');
    var type   = select.value;
    var show   = typeFields[type] || [];

    row.querySelectorAll('.ms-field-installment').forEach(function(el) {
        el.classList.toggle('d-none', !show.includes('installment'));
    });
    row.querySelectorAll('.ms-field-due').forEach(function(el) {
        el.classList.toggle('d-none', !show.includes('due'));
    });
}

function addMilestone() {
    var template = document.getElementById('milestone-row-template');
    var container = document.getElementById('milestones-container');

    // Clone and replace placeholder index
    var html = template.innerHTML.replace(/__IDX__/g, milestoneIndex);
    var div  = document.createElement('div');
    div.innerHTML = html;
    var row = div.firstElementChild;

    container.appendChild(row);
    milestoneIndex++;
    reindexRows();
    recalcTotal();

    // Trigger type change to set correct field visibility
    var sel = row.querySelector('.ms-type-select');
    if (sel) onTypeChange(sel);

    // Scroll into view
    row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function removeMilestone(btn) {
    var rows = document.querySelectorAll('.milestone-row');
    if (rows.length <= 1) {
        alert('A payment plan must have at least one milestone.');
        return;
    }
    btn.closest('.milestone-row').remove();
    reindexRows();
    recalcTotal();
}

function reindexRows() {
    document.querySelectorAll('.milestone-row').forEach(function(row, i) {
        row.dataset.index = i;
        // Update all name attributes
        row.querySelectorAll('[name^="milestones["]').forEach(function(el) {
            el.name = el.name.replace(/milestones\[\d+\]/, 'milestones[' + i + ']');
        });
        // Update number badge
        var num = row.querySelector('.ms-row-num');
        if (num) num.textContent = i + 1;
    });
}

function recalcTotal() {
    var total = 0;
    document.querySelectorAll('.ms-pct-input').forEach(function(el) {
        total += parseFloat(el.value) || 0;
    });
    document.getElementById('pct-total').textContent = total.toFixed(total % 1 === 0 ? 0 : 2);
    var badge = document.getElementById('pct-total-badge');
    badge.className = 'badge ' + (total > 100 ? 'badge-danger' : total === 100 ? 'badge-success' : 'badge-light');
}

// ── Init on load ────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', function () {
    // Set correct field visibility for all existing rows
    document.querySelectorAll('.ms-type-select').forEach(onTypeChange);
    recalcTotal();

    // If no rows at all (blank create page), add first row
    var container = document.getElementById('milestones-container');
    if (container.querySelectorAll('.milestone-row').length === 0) {
        addMilestone();
    }

    // ── Drag-to-reorder via HTML5 drag API ──────────────────────
    var dragging = null;

    container.addEventListener('dragstart', function(e) {
        dragging = e.target.closest('.milestone-row');
        if (dragging) dragging.style.opacity = '0.4';
    });
    container.addEventListener('dragend', function() {
        if (dragging) dragging.style.opacity = '';
        dragging = null;
        reindexRows();
    });
    container.addEventListener('dragover', function(e) {
        e.preventDefault();
        var over = e.target.closest('.milestone-row');
        if (over && dragging && over !== dragging) {
            var rect = over.getBoundingClientRect();
            var next = (e.clientY - rect.top) > rect.height / 2
                ? over.nextSibling : over;
            container.insertBefore(dragging, next);
        }
    });
    container.querySelectorAll('.milestone-row-handle').forEach(function(h) {
        h.closest('.milestone-row').setAttribute('draggable', 'true');
    });
});
</script>