{{--
    Partial: _milestone_row.blade.php
    Variables: $i (index or '__IDX__'), $m (PaymentPlanMilestone or null)
--}}
@php
    $type     = $m->type ?? 'down_payment';
    $label    = $m->label ?? '';
    $pct      = $m->percentage ?? '';
    $fixed    = $m->fixed_amount ?? '';
    $icnt     = $m->installment_count ?? '';
    $iint     = $m->installment_interval ?? '';
    $dueDate  = isset($m->due_date) ? $m->due_date->format('Y-m-d') : '';
    $dueDays  = $m->due_after_days ?? '';
    $note     = $m->note ?? '';
@endphp

<div class="milestone-row" id="milestone-row-{{ $i }}" data-index="{{ $i }}">
    <div class="d-flex align-items-start" style="gap:10px;">

        {{-- Drag handle + number --}}
        <span class="milestone-row-handle"><i class="fas fa-grip-vertical"></i></span>
        <span class="milestone-row-num ms-row-num">{{ is_numeric($i) ? $i + 1 : '?' }}</span>

        {{-- Fields --}}
        <div class="flex-grow-1">
            <div class="row">

                {{-- Type --}}
                <div class="col-md-3 mb-2">
                    <label class="form-label small font-weight-bold text-muted">Type</label>
                    <select name="milestones[{{ $i }}][type]"
                            class="form-control form-control-sm ms-type-select"
                            onchange="onTypeChange(this)">
                        <option value="down_payment"     {{ $type === 'down_payment'     ? 'selected' : '' }}>Down Payment</option>
                        <option value="installment"      {{ $type === 'installment'      ? 'selected' : '' }}>Installment</option>
                        <option value="on_completion"    {{ $type === 'on_completion'    ? 'selected' : '' }}>On Completion</option>
                        <option value="on_handover"      {{ $type === 'on_handover'      ? 'selected' : '' }}>On Handover</option>
                        <option value="rental_guarantee" {{ $type === 'rental_guarantee' ? 'selected' : '' }}>Rental Guarantee</option>
                        <option value="custom"           {{ $type === 'custom'           ? 'selected' : '' }}>Custom</option>
                    </select>
                </div>

                {{-- Label --}}
                <div class="col-md-5 mb-2">
                    <label class="form-label small font-weight-bold text-muted">Label / Description <span class="text-danger">*</span></label>
                    <input type="text"
                           name="milestones[{{ $i }}][label]"
                           class="form-control form-control-sm"
                           value="{{ $label }}"
                           placeholder="e.g. 20% down payment"
                           required>
                </div>

                {{-- Percentage --}}
                <div class="col-md-2 mb-2">
                    <label class="form-label small font-weight-bold text-muted">% Amount</label>
                    <div class="input-group input-group-sm">
                        <input type="number"
                               name="milestones[{{ $i }}][percentage]"
                               class="form-control ms-pct-input"
                               value="{{ $pct }}"
                               min="0" max="100" step="0.01"
                               placeholder="0"
                               oninput="recalcTotal()">
                        <div class="input-group-append">
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                </div>

                {{-- Fixed amount --}}
                <div class="col-md-2 mb-2">
                    <label class="form-label small font-weight-bold text-muted">Fixed Amount</label>
                    <input type="number"
                           name="milestones[{{ $i }}][fixed_amount]"
                           class="form-control form-control-sm"
                           value="{{ $fixed }}"
                           min="0" step="0.01"
                           placeholder="Optional">
                </div>

            </div>

            {{-- Installment sub-fields --}}
            <div class="row ms-field-installment {{ $type === 'installment' ? '' : 'd-none' }}">
                <div class="col-md-3 mb-2">
                    <label class="form-label small font-weight-bold text-muted">Number of Installments</label>
                    <input type="number"
                           name="milestones[{{ $i }}][installment_count]"
                           class="form-control form-control-sm"
                           value="{{ $icnt }}"
                           min="1" placeholder="e.g. 8">
                </div>
                <div class="col-md-3 mb-2">
                    <label class="form-label small font-weight-bold text-muted">Interval</label>
                    <input type="text"
                           name="milestones[{{ $i }}][installment_interval]"
                           class="form-control form-control-sm"
                           value="{{ $iint }}"
                           list="interval-options-{{ $i }}"
                           placeholder="e.g. monthly, every 4 months">
                    <datalist id="interval-options-{{ $i }}">
                        <option value="monthly">
                        <option value="quarterly">
                        <option value="every 4 months">
                        <option value="bi-annually">
                        <option value="annually">
                    </datalist>
                </div>
            </div>

            {{-- Due date field --}}
            <div class="row ms-field-due {{ in_array($type, ['on_completion','on_handover','custom']) ? '' : 'd-none' }}">
                <div class="col-md-3 mb-2">
                    <label class="form-label small font-weight-bold text-muted">Due Date <small>(optional)</small></label>
                    <input type="date"
                           name="milestones[{{ $i }}][due_date]"
                           class="form-control form-control-sm"
                           value="{{ $dueDate }}">
                </div>
                <div class="col-md-3 mb-2">
                    <label class="form-label small font-weight-bold text-muted">Or Due After (days)</label>
                    <input type="number"
                           name="milestones[{{ $i }}][due_after_days]"
                           class="form-control form-control-sm"
                           value="{{ $dueDays }}"
                           min="0" placeholder="e.g. 30">
                </div>
            </div>

            {{-- Note --}}
            <div class="row">
                <div class="col-md-8 mb-1">
                    <label class="form-label small font-weight-bold text-muted">Note <small>(optional — shown to buyers)</small></label>
                    <input type="text"
                           name="milestones[{{ $i }}][note]"
                           class="form-control form-control-sm"
                           value="{{ $note }}"
                           placeholder="e.g. Free Furnishing included">
                </div>
            </div>
        </div>

        {{-- Remove button --}}
        <button type="button" class="milestone-remove-btn" onclick="removeMilestone(this)" title="Remove">
            <i class="fas fa-times-circle"></i>
        </button>

    </div>
</div>