{{--
    Partial: _unit_payment_plans.blade.php
    Uses fetch() so there's no nested <form> conflict with the unit edit form.

    Variables needed:
      $plots    — PlotDetail model (with paymentPlans loaded)
      $allPlans — active PaymentPlan collection (with milestones)
--}}

<div class="card mt-4" id="pp-assign-card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h6 class="mb-0">
            <i class="fas fa-file-invoice-dollar mr-2 text-warning"></i>
            Payment Plans
        </h6>
        <small class="text-muted">Selected plans appear on the buyer-facing unit page</small>
    </div>
    <div class="card-body">

        <div id="pp-assign-feedback" style="display:none;" class="alert mb-3"></div>

        @if($allPlans->isEmpty())
            <div class="text-muted text-center py-3">
                <i class="fas fa-info-circle mr-1"></i>
                No active payment plans yet.
                <a href="{{ route('payment-plans.create') }}" target="_blank">Create one first →</a>
            </div>
        @else
            @php $assignedIds = $plots->paymentPlans->pluck('id')->toArray(); @endphp

            <div class="pp-assign-grid">
                @foreach($allPlans as $plan)
                    @php $checked = in_array($plan->id, $assignedIds); @endphp
                    <label class="pp-assign-card {{ $checked ? 'pp-assign-card--checked' : '' }}"
                           for="pp-{{ $plan->id }}">

                        <input type="checkbox"
                               id="pp-{{ $plan->id }}"
                               class="pp-plan-checkbox"
                               value="{{ $plan->id }}"
                               {{ $checked ? 'checked' : '' }}
                               onchange="this.closest('label').classList.toggle('pp-assign-card--checked', this.checked)">

                        <div class="pp-assign-card-body">
                            <div class="pp-assign-name">{{ $plan->name }}</div>
                            @if($plan->description)
                                <div class="pp-assign-desc">{{ $plan->description }}</div>
                            @endif
                            <div class="pp-assign-steps">
                                @foreach($plan->milestones->take(3) as $m)
                                    <span class="pp-assign-step">
                                        {{ $m->label }}@if($m->percentage) ({{ $m->percentage }}%)@endif
                                    </span>
                                @endforeach
                                @if($plan->milestones->count() > 3)
                                    <span class="pp-assign-step pp-assign-step--more">
                                        +{{ $plan->milestones->count() - 3 }} more milestones
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="pp-assign-check"><i class="fas fa-check-circle"></i></div>
                    </label>
                @endforeach
            </div>

            <div class="mt-3 d-flex align-items-center" style="gap:12px;">
                <button type="button" class="btn btn-warning btn-sm" id="pp-save-btn"
                        onclick="savePlanAssignments({{ $plots->id }})">
                    <i class="fas fa-save mr-1"></i> Save Payment Plans
                </button>
                <span id="pp-save-spinner" style="display:none;color:#6c757d;font-size:13px;">
                    <i class="fas fa-spinner fa-spin mr-1"></i> Saving...
                </span>
            </div>
        @endif
    </div>
</div>

<style>
.pp-assign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px; margin-bottom: 4px;
}
.pp-assign-card {
    position: relative; display: flex; align-items: flex-start;
    padding: 14px; border: 2px solid #e9ecef; border-radius: 10px;
    cursor: pointer; transition: all 0.18s; background: #fff; user-select: none;
}
.pp-assign-card:hover, .pp-assign-card--checked { border-color: #c9a96e; background: #fffdf8; }
.pp-assign-card input[type="checkbox"] { display: none; }
.pp-assign-card-body { flex: 1; min-width: 0; }
.pp-assign-name  { font-size: 13px; font-weight: 700; color: #343a40; margin-bottom: 4px; }
.pp-assign-desc  { font-size: 11px; color: #6c757d; margin-bottom: 6px; line-height: 1.4; }
.pp-assign-steps { display: flex; flex-direction: column; gap: 2px; }
.pp-assign-step  { font-size: 11px; color: #495057; padding: 1px 0; }
.pp-assign-step::before { content: '•'; margin-right: 5px; color: #c9a96e; }
.pp-assign-step--more { color: #adb5bd; font-style: italic; }
.pp-assign-step--more::before { display: none; }
.pp-assign-check { color: #dee2e6; font-size: 20px; transition: color 0.18s; flex-shrink: 0; margin-left: 10px; }
.pp-assign-card--checked .pp-assign-check { color: #c9a96e; }
</style>

<script>
function savePlanAssignments(plotId) {
    var btn      = document.getElementById('pp-save-btn');
    var spinner  = document.getElementById('pp-save-spinner');
    var feedback = document.getElementById('pp-assign-feedback');
    var checked  = Array.from(document.querySelectorAll('.pp-plan-checkbox:checked'))
                        .map(function(el){ return el.value; });

    btn.disabled = true;
    spinner.style.display = 'inline';
    feedback.style.display = 'none';

    fetch('/admin/units/' + plotId + '/payment-plans', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept':        'application/json',
            'X-CSRF-TOKEN':  '{{ csrf_token() }}',
        },
        body: JSON.stringify({ payment_plan_ids: checked }),
    })
    .then(function(r) {
        if (!r.ok) throw new Error('Server error ' + r.status);
        return r.json();
    })
    .then(function() {
        feedback.className = 'alert alert-success mb-3';
        feedback.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Payment plans saved.';
        feedback.style.display = 'block';
        setTimeout(function(){ feedback.style.display = 'none'; }, 3000);
    })
    .catch(function(err) {
        feedback.className = 'alert alert-danger mb-3';
        feedback.innerHTML = '<i class="fas fa-exclamation-circle mr-1"></i> Failed: ' + err.message;
        feedback.style.display = 'block';
    })
    .finally(function() {
        btn.disabled = false;
        spinner.style.display = 'none';
    });
}
</script>