{{--
    Partial: _milestone_form.blade.php
    Variables available: $plan (optional, for edit), $milestoneTypes
--}}

{{-- ── Plan details ── --}}
<div class="card mb-4">
    <div class="card-header"><h6 class="mb-0"><i class="fas fa-info-circle mr-2"></i>Plan Details</h6></div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-8">
                <div class="form-group">
                    <label class="form-label font-weight-bold">Plan Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                           value="{{ old('name', $plan->name ?? '') }}"
                           placeholder="e.g. Standard Payment Plan" required>
                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label class="form-label font-weight-bold">Status</label>
                    <div class="mt-2">
                        <label class="d-flex align-items-center" style="gap:10px;cursor:pointer;">
                            <input type="hidden" name="is_active" value="0">
                            <input type="checkbox" name="is_active" value="1"
                                   {{ old('is_active', $plan->is_active ?? true) ? 'checked' : '' }}
                                   style="width:18px;height:18px;cursor:pointer;">
                            <span style="font-size:14px;">Active (visible to buyers)</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group mb-0">
            <label class="form-label font-weight-bold">Description</label>
            <textarea name="description" class="form-control" rows="2"
                      placeholder="Optional short description shown to buyers...">{{ old('description', $plan->description ?? '') }}</textarea>
        </div>
    </div>
</div>

{{-- ── Milestones builder ── --}}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h6 class="mb-0"><i class="fas fa-list-ol mr-2"></i>Payment Milestones</h6>
        <div class="d-flex align-items-center" style="gap:12px;">
            <span id="pct-total-badge" class="badge badge-light" style="font-size:13px;">
                Total: <strong id="pct-total">0</strong>%
            </span>
            <button type="button" class="btn btn-sm btn-outline-primary" onclick="addMilestone()">
                <i class="fas fa-plus mr-1"></i> Add Milestone
            </button>
        </div>
    </div>
    <div class="card-body p-0">
        <div id="milestones-container">
            {{-- Existing milestones (edit mode) or one blank row (create mode) --}}
            @if(isset($plan) && $plan->milestones->count())
                @foreach($plan->milestones as $i => $m)
                    @include('PaymentPlans._milestone_row', ['i' => $i, 'm' => $m])
                @endforeach
            @else
                {{-- one blank starter row --}}
                <div id="milestone-template-placeholder"></div>
            @endif
        </div>
        <div class="p-3">
            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="addMilestone()">
                <i class="fas fa-plus mr-1"></i> Add another milestone
            </button>
        </div>
    </div>
</div>

{{-- Hidden template row (cloned by JS) --}}
<template id="milestone-row-template">
    @include('PaymentPlans._milestone_row', ['i' => '__IDX__', 'm' => null])
</template>

<style>
.milestone-row {
    border-bottom: 1px solid #f0f0f0;
    padding: 16px 20px;
    position: relative;
    transition: background 0.15s;
}
.milestone-row:last-child { border-bottom: none; }
.milestone-row:hover { background: #fffdf8; }

.milestone-row-handle {
    cursor: grab; color: #adb5bd; font-size: 16px;
    padding: 4px 8px; margin-right: 4px;
}
.milestone-row-num {
    width: 26px; height: 26px; border-radius: 50%;
    background: #c9a96e; color: #fff;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.milestone-remove-btn {
    background: none; border: none; color: #dc3545;
    font-size: 16px; cursor: pointer; padding: 4px 8px;
    transition: color 0.2s;
}
.milestone-remove-btn:hover { color: #a71d2a; }

/* Type-specific fields show/hide */
.ms-field-installment,
.ms-field-due_date,
.ms-field-due_after_days,
.ms-field-note { display: none; }

.type-badge-preview {
    display: inline-block; padding: 2px 10px; border-radius: 10px;
    font-size: 11px; font-weight: 700;
}
</style>