@php($title = 'Memberships')
@php($heading = 'Memberships')
@php($sidebar = view()->make('dashboard.partials.admin-sidebar')->render())

@extends('layouts.dashboard', compact('title','heading','sidebar'))

@section('content')
    <div class="rounded-2xl bg-white shadow p-4">
        @isset($missing)
            @if($missing)
                <div class="mb-3 px-3 py-2 rounded bg-amber-100 text-amber-800 text-sm">
                    Membership table is missing. Please run `php artisan migrate`.
                </div>
            @endif
        @endisset
        <h3 class="font-semibold mb-4">Manage Membership Plans</h3>
        @if(session('status') || session('warning'))
            <div class="mb-3 space-y-2">
                @if(session('status'))
                    <div class="px-3 py-2 rounded bg-emerald-100 text-emerald-800 text-sm">{{ session('status') }}</div>
                @endif
                @if(session('warning'))
                    <div class="px-3 py-2 rounded bg-amber-100 text-amber-800 text-sm">
                        {{ session('warning') }}
                        @php($trimmed = (array) (session('trimmed_plans') ?? []))
                        @if(count($trimmed))
                            <span class="ml-1">Affected: {{ implode(', ', $trimmed) }}</span>
                        @endif
                    </div>
                @endif
            </div>
        @endif
        <form method="POST" action="{{ route('admin.memberships.update') }}" class="space-y-6">
            @csrf

            @foreach(($plans ?? []) as $plan)
                <div class="border border-slate-200 rounded-xl overflow-hidden">
                    <div class="px-4 py-2 bg-slate-50 flex items-center gap-2">
                        <span class="text-sm font-semibold">Plan: {{ $plan->name }} ({{ $plan->billing_period }})</span>
                        <span class="ml-auto text-xs px-2 py-0.5 rounded {{ $plan->active ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-200 text-slate-700' }}">{{ $plan->active ? 'Active' : 'Inactive' }}</span>
                    </div>
                    <div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="space-y-2">
                            <label class="block text-xs text-slate-600">Name</label>
                            <input name="plans[{{ $plan->id }}][name]" class="w-full rounded border-slate-300" value="{{ $plan->name }}"/>

                            <label class="block text-xs text-slate-600 mt-2">Slug</label>
                            <input name="plans[{{ $plan->id }}][slug]" class="w-full rounded border-slate-300" value="{{ $plan->slug }}"/>

                            <label class="block text-xs text-slate-600 mt-2">Billing Period</label>
                            <select name="plans[{{ $plan->id }}][billing_period]" class="w-full rounded border-slate-300">
                                @foreach(['monthly','yearly','lifetime'] as $period)
                                    <option value="{{ $period }}" @selected($plan->billing_period === $period)>{{ ucfirst($period) }}</option>
                                @endforeach
                            </select>

                            <label class="block text-xs text-slate-600 mt-2">Display Order</label>
                            <input type="number" name="plans[{{ $plan->id }}][display_order]" class="w-full rounded border-slate-300" value="{{ $plan->display_order }}"/>
                        </div>
                        <div class="space-y-2">
                            <label class="block text-xs text-slate-600">Price (cents)</label>
                            <input type="number" name="plans[{{ $plan->id }}][price_cents]" class="w-full rounded border-slate-300" value="{{ $plan->price_cents }}"/>

                            <label class="block text-xs text-slate-600 mt-2">Currency</label>
                            <input name="plans[{{ $plan->id }}][currency]" class="w-full rounded border-slate-300" value="{{ $plan->currency }}"/>

                            <label class="block text-xs text-slate-600 mt-2">Discount (%)</label>
                            <input type="number" name="plans[{{ $plan->id }}][discount_percent]" class="w-full rounded border-slate-300" value="{{ $plan->discount_percent }}"/>

                            <label class="inline-flex items-center gap-2 mt-2">
                                <input type="checkbox" name="plans[{{ $plan->id }}][active]" value="1" @checked($plan->active) />
                                <span class="text-xs text-slate-600">Active</span>
                            </label>

                            <div class="mt-3 border-t pt-3">
                                <div class="text-xs text-slate-700 font-semibold mb-2">CTA & Card Accent</div>
                                <div class="grid grid-cols-2 gap-2">
                                    <div>
                                        <label class="block text-xs text-slate-600">CTA From</label>
                                        <input type="color" name="plans[{{ $plan->id }}][cta_from_hex]" class="w-full rounded border-slate-300 h-9" value="{{ $plan->cta_from_hex ?? '#7C3AED' }}" />
                                    </div>
                                    <div>
                                        <label class="block text-xs text-slate-600">CTA To</label>
                                        <input type="color" name="plans[{{ $plan->id }}][cta_to_hex]" class="w-full rounded border-slate-300 h-9" value="{{ $plan->cta_to_hex ?? '#A78BFA' }}" />
                                    </div>
                                    <div>
                                        <label class="block text-xs text-slate-600">Card Accent From</label>
                                        <input type="color" name="plans[{{ $plan->id }}][card_accent_from_hex]" class="w-full rounded border-slate-300 h-9" value="{{ $plan->card_accent_from_hex ?? '#DDD6FE' }}" />
                                    </div>
                                    <div>
                                        <label class="block text-xs text-slate-600">Card Accent To</label>
                                        <input type="color" name="plans[{{ $plan->id }}][card_accent_to_hex]" class="w-full rounded border-slate-300 h-9" value="{{ $plan->card_accent_to_hex ?? '#EDE9FE' }}" />
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <div class="text-xs text-slate-600 mb-1">Preview</div>
                                    <div id="cta-preview-{{ $plan->id }}" class="h-8 rounded w-full border border-slate-200" data-cta-from="{{ $plan->cta_from_hex ?? '#7C3AED' }}" data-cta-to="{{ $plan->cta_to_hex ?? '#A78BFA' }}"></div>
                                    <div id="accent-preview-{{ $plan->id }}" class="h-8 rounded w-full border border-slate-200 mt-2" data-accent-from="{{ $plan->card_accent_from_hex ?? '#DDD6FE' }}" data-accent-to="{{ $plan->card_accent_to_hex ?? '#EDE9FE' }}"></div>
                                </div>
                            </div>

                            <div class="mt-3 border-t pt-3">
                                <div class="text-xs text-slate-700 font-semibold mb-2">Badge & Colors</div>
                                <label class="block text-xs text-slate-600">Badge Label</label>
                                <input name="plans[{{ $plan->id }}][badge_label]" class="w-full rounded border-slate-300" value="{{ $plan->badge_label }}" placeholder="e.g., Popular" />
                                <div class="grid grid-cols-2 gap-2 mt-2">
                                    <div>
                                        <label class="block text-xs text-slate-600">Badge BG</label>
                                        <input type="color" name="plans[{{ $plan->id }}][badge_bg_hex]" class="w-full rounded border-slate-300 h-9" value="{{ $plan->badge_bg_hex ?? '#EDE9FE' }}" />
                                    </div>
                                    <div>
                                        <label class="block text-xs text-slate-600">Badge Text</label>
                                        <input type="color" name="plans[{{ $plan->id }}][badge_text_hex]" class="w-full rounded border-slate-300 h-9" value="{{ $plan->badge_text_hex ?? '#6D28D9' }}" />
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <span class="text-xs text-slate-600">Badge Preview</span>
                                    <span id="badge-preview-{{ $plan->id }}" class="ml-2 inline-block px-2 py-1 rounded text-xs" data-badge-bg="{{ $plan->badge_bg_hex ?? '#EDE9FE' }}" data-badge-text="{{ $plan->badge_text_hex ?? '#6D28D9' }}">{{ $plan->badge_label ?? 'Badge' }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="space-y-2">
                            <label class="block text-xs text-slate-600">Features (checkbox per line)</label>
                            @php($rows = collect((array)($plan->details ?? [])))
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-slate-600">Features: <strong id="feature-count-{{ $plan->id }}">{{ $rows->count() }}</strong> <span id="feature-warning-{{ $plan->id }}" class="ml-2 hidden text-amber-700">Max 50 recommended</span></span>
                                <div class="flex items-center gap-2">
                                    <button type="button" class="px-2 py-1 text-xs rounded bg-violet-100 text-violet-700 hover:bg-violet-200" onclick="addFeatureRows({{ $plan->id }}, 5)">Add 5 Rows</button>
                                    <button type="button" class="px-2 py-1 text-xs rounded bg-emerald-100 text-emerald-700 hover:bg-emerald-200" onclick="populateDefaultFeatures({{ $plan->id }})">Populate Defaults (fill to 25)</button>
                                </div>
                            </div>
                            <div id="details-list-{{ $plan->id }}" data-next-index="{{ $rows->count() }}" class="space-y-2 mt-2">
                                @foreach($rows as $i => $row)
                                    <div class="feature-row flex items-center gap-2 cursor-move" draggable="true" tabindex="0">
                                        <span class="drag-handle select-none text-slate-400" title="Drag to reorder" aria-label="Drag handle">⋮⋮</span>
                                        <input name="plans[{{ $plan->id }}][details][{{ $i }}][label]" class="flex-1 rounded border-slate-300" value="{{ $row['label'] ?? '' }}" placeholder="Feature label" />
                                        <div class="inline-flex items-center gap-3 text-xs text-slate-600" role="group" aria-label="Include or exclude">
                                            <label class="inline-flex items-center gap-1">
                                                <input type="radio" name="plans[{{ $plan->id }}][details][{{ $i }}][included]" value="1" @checked(($row['included'] ?? false) === true) /> ✅
                                            </label>
                                            <label class="inline-flex items-center gap-1">
                                                <input type="radio" name="plans[{{ $plan->id }}][details][{{ $i }}][included]" value="0" @checked(($row['included'] ?? false) === false) /> ❌
                                            </label>
                                        </div>
                                        <button type="button" class="px-2 py-1 text-xs rounded bg-slate-200 hover:bg-slate-300" onclick="removeFeatureRow(this, {{ $plan->id }})">Remove</button>
                                    </div>
                                @endforeach
                            </div>
                            <div class="pt-2">
                                <button type="button" class="px-3 py-1.5 text-xs rounded bg-violet-100 text-violet-700 hover:bg-violet-200" onclick="addFeatureRow({{ $plan->id }})">Add Feature</button>
                            </div>
                            <div class="mt-4 border-t pt-3">
                                <div class="text-xs text-slate-700 font-semibold mb-2">Restrictions</div>
                                <div class="space-y-2">
                                    <label class="block text-xs text-slate-600">Unlocked Categories</label>
                                    <div class="grid grid-cols-2 md:grid-cols-3 gap-2 p-2 border rounded">
                                        @foreach(($categories ?? []) as $cat)
                                            @php($allowed = collect((array)($plan->allowed_category_slugs ?? [])))
                                            <label class="inline-flex items-center gap-2 text-xs">
                                                <input type="checkbox" name="plans[{{ $plan->id }}][allowed_categories][]" value="{{ $cat->slug }}" @checked($allowed->contains($cat->slug)) />
                                                <span>{{ $cat->title }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                    <div class="grid grid-cols-1 md:grid-cols-4 gap-2">
                                        <div>
                                            <label class="block text-xs text-slate-600">Daily downloads (total)</label>
                                            <input type="number" min="0" name="plans[{{ $plan->id }}][daily_download_limit_total]" class="w-full rounded border-slate-300" value="{{ $plan->daily_download_limit_total }}" placeholder="e.g., 20" />
                                        </div>
                                        <div>
                                            <label class="block text-xs text-slate-600">Daily per category</label>
                                            <input type="number" min="0" name="plans[{{ $plan->id }}][daily_download_limit_per_category]" class="w-full rounded border-slate-300" value="{{ $plan->daily_download_limit_per_category }}" placeholder="e.g., 5" />
                                        </div>
                                        <div>
                                            <label class="block text-xs text-slate-600">Max categories downloadable</label>
                                            <input type="number" min="0" name="plans[{{ $plan->id }}][max_categories_downloadable]" class="w-full rounded border-slate-300" value="{{ $plan->max_categories_downloadable }}" placeholder="e.g., 3" />
                                        </div>
                                        <div>
                                            <label class="block text-xs text-slate-600">Activation limit (total)</label>
                                            <input type="number" min="0" name="plans[{{ $plan->id }}][activation_limit_total]" class="w-full rounded border-slate-300" value="{{ $plan->activation_limit_total }}" placeholder="e.g., 10" />
                                        </div>
                                    </div>
                                    @unless(($hasActivationCol ?? false))
                                        <p class="text-xs text-amber-600">Activation limit field will not be saved until its database column exists.</p>
                                    @endunless
                                    <p class="text-xs text-slate-500">These limits are saved per plan and can be enforced in download logic.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

            <div class="pt-2">
                <button class="px-4 py-2 rounded-lg bg-violet-600 text-white hover:bg-violet-500">Save Changes</button>
            </div>
        </form>
    </div>
@endsection

@section('scripts')
<script>
function addFeatureRow(planId) {
    const container = document.getElementById('details-list-' + planId);
    if (!container) return;
    const idx = parseInt(container.dataset.nextIndex || '0');
    const row = document.createElement('div');
    row.className = 'feature-row flex items-center gap-2 cursor-move';
    row.setAttribute('draggable', 'true');
    row.innerHTML = `
        <span class="drag-handle select-none text-slate-400" title="Drag to reorder" aria-label="Drag handle">⋮⋮</span>
        <input name="plans[${planId}][details][${idx}][label]" class="flex-1 rounded border-slate-300" value="" placeholder="Feature label" />
        <div class="inline-flex items-center gap-3 text-xs text-slate-600" role="group" aria-label="Include or exclude">
            <label class="inline-flex items-center gap-1">
                <input type="radio" name="plans[${planId}][details][${idx}][included]" value="1" /> ✅
            </label>
            <label class="inline-flex items-center gap-1">
                <input type="radio" name="plans[${planId}][details][${idx}][included]" value="0" checked /> ❌
            </label>
        </div>
        <button type="button" class="px-2 py-1 text-xs rounded bg-slate-200 hover:bg-slate-300" onclick="removeFeatureRow(this, ${planId})">Remove</button>
    `;
    container.appendChild(row);
    container.dataset.nextIndex = idx + 1;
    makeRowDraggable(row, planId);
    if (typeof makeRowKeyboardNavigable === 'function') { makeRowKeyboardNavigable(row, planId); }
    updateFeatureCount(planId);
}

function addFeatureRows(planId, count) {
    for (let i = 0; i < count; i++) {
        addFeatureRow(planId);
    }
}

function removeFeatureRow(btn, planId) {
    const row = btn.closest('.feature-row');
    if (row) row.remove();
    updateFeatureCount(planId);
}

function updateFeatureCount(planId) {
    const container = document.getElementById('details-list-' + planId);
    const countEl = document.getElementById('feature-count-' + planId);
    const warnEl = document.getElementById('feature-warning-' + planId);
    if (!container || !countEl) return;
    const count = container.querySelectorAll('.feature-row').length;
    countEl.textContent = count;
    if (warnEl) {
        warnEl.classList.toggle('hidden', count <= 50);
    }
}

// Default labels used to quickly populate to 25
const DEFAULT_FEATURE_LABELS = [
    'WordPress plugins: 3000',
    'WordPress plugins: 5000',
    'WordPress themes: 200',
    'Premium templates: 100',
    'Daily cloud backups',
    'On-demand backups',
    'Malware scanning',
    'Firewall protection',
    'Performance CDN',
    'Image optimization',
    'SEO toolkit',
    'Advanced SEO audits',
    'Uptime monitoring',
    'Priority support',
    'Dedicated account manager',
    'Staging environments',
    'One-click restore',
    'Automated updates',
    'License manager',
    'Multi-site license',
    'Team collaboration',
    'Audit logs',
    'Advanced analytics',
    'SLA 99.9%',
    'White-label branding',
];

function populateDefaultFeatures(planId) {
    const container = document.getElementById('details-list-' + planId);
    if (!container) return;
    const existingLabels = Array.from(container.querySelectorAll('input[name^="plans['+planId+'][details]"]'))
        .filter(el => el.name.endsWith('[label]'))
        .map(el => el.value.trim().toLowerCase());
    for (const label of DEFAULT_FEATURE_LABELS) {
        if (container.querySelectorAll('.feature-row').length >= 25) break;
        if (existingLabels.includes(label.toLowerCase())) continue;
        const idx = parseInt(container.dataset.nextIndex || '0');
        const row = document.createElement('div');
        row.className = 'feature-row flex items-center gap-2 cursor-move';
        row.setAttribute('draggable', 'true');
        row.innerHTML = `
            <span class=\"drag-handle select-none text-slate-400\" title=\"Drag to reorder\" aria-label=\"Drag handle\">⋮⋮</span>
            <input name=\"plans[${planId}][details][${idx}][label]\" class=\"flex-1 rounded border-slate-300\" value=\"${label}\" placeholder=\"Feature label\" />
            <div class=\"inline-flex items-center gap-3 text-xs text-slate-600\" role=\"group\" aria-label=\"Include or exclude\">
                <label class=\"inline-flex items-center gap-1\">
                    <input type=\"radio\" name=\"plans[${planId}][details][${idx}][included]\" value=\"1\" /> ✅
                </label>
                <label class=\"inline-flex items-center gap-1\">
                    <input type=\"radio\" name=\"plans[${planId}][details][${idx}][included]\" value=\"0\" checked /> ❌
                </label>
            </div>
            <button type=\"button\" class=\"px-2 py-1 text-xs rounded bg-slate-200 hover:bg-slate-300\" onclick=\"removeFeatureRow(this, ${planId})\">Remove</button>
        `;
        container.appendChild(row);
        container.dataset.nextIndex = idx + 1;
        makeRowDraggable(row, planId);
        if (typeof makeRowKeyboardNavigable === 'function') { makeRowKeyboardNavigable(row, planId); }
    }
    updateFeatureCount(planId);
}

// Drag-and-drop reordering support
function makeRowDraggable(row, planId) {
    row.addEventListener('dragstart', (e) => {
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/plain', 'dragging');
        row.classList.add('opacity-50');
        row.dataset.dragging = '1';
    });
    row.addEventListener('dragend', () => {
        row.classList.remove('opacity-50');
        delete row.dataset.dragging;
    });
    row.addEventListener('dragover', (e) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
    });
    row.addEventListener('drop', (e) => {
        e.preventDefault();
        const container = document.getElementById('details-list-' + planId);
        const dragging = container.querySelector('.feature-row[data-dragging="1"]');
        if (!dragging || dragging === row) return;
        container.insertBefore(dragging, row);
        renumberFeatureRows(planId);
        updateFeatureCount(planId);
    });
}

function renumberFeatureRows(planId) {
    const container = document.getElementById('details-list-' + planId);
    if (!container) return;
    const rows = Array.from(container.querySelectorAll('.feature-row'));
    rows.forEach((r, idx) => {
        const labelInput = r.querySelector('input[name^="plans['+planId+'][details]"][name$="[label]"]');
        const checkbox = r.querySelector('input[type="checkbox"][name^="plans['+planId+'][details]"]');
        if (labelInput) labelInput.name = `plans[${planId}][details][${idx}][label]`;
        if (checkbox) checkbox.name = `plans[${planId}][details][${idx}][included]`;
    });
    container.dataset.nextIndex = rows.length;
}

// Initialize drag handlers on existing rows
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('[id^="details-list-"]').forEach(container => {
        const planId = container.id.replace('details-list-', '');
        container.querySelectorAll('.feature-row').forEach(row => makeRowDraggable(row, planId));
        updateFeatureCount(planId);
    });
});
</script>
<script>
// Keyboard accessibility for reordering (ArrowUp/ArrowDown)
function makeRowKeyboardNavigable(row, planId) {
    if (!row) return;
    row.setAttribute('tabindex', '0');
    row.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
            e.preventDefault();
            const container = document.getElementById('details-list-' + planId);
            if (!container) return;
            if (e.key === 'ArrowUp' && row.previousElementSibling) {
                container.insertBefore(row, row.previousElementSibling);
            } else if (e.key === 'ArrowDown' && row.nextElementSibling) {
                container.insertBefore(row.nextElementSibling, row);
            }
            if (typeof renumberFeatureRows === 'function') renumberFeatureRows(planId);
            if (typeof updateFeatureCount === 'function') updateFeatureCount(planId);
            row.focus();
        }
    });
}

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('[id^="details-list-"]').forEach(container => {
        const planId = container.id.replace('details-list-', '');
        container.querySelectorAll('.feature-row').forEach(row => makeRowKeyboardNavigable(row, planId));
    });
});
</script>
<script>
function applyPlanColorPreviews(planId) {
    const ctaEl = document.getElementById('cta-preview-' + planId);
    if (ctaEl) {
        const from = ctaEl.dataset.ctaFrom;
        const to = ctaEl.dataset.ctaTo;
        if (from && to) {
            ctaEl.style.backgroundImage = 'linear-gradient(90deg, ' + from + ', ' + to + ')';
        }
    }
    const accentEl = document.getElementById('accent-preview-' + planId);
    if (accentEl) {
        const from2 = accentEl.dataset.accentFrom;
        const to2 = accentEl.dataset.accentTo;
        if (from2 && to2) {
            accentEl.style.backgroundImage = 'linear-gradient(90deg, ' + from2 + ', ' + to2 + ')';
        }
    }
    const badgeEl = document.getElementById('badge-preview-' + planId);
    if (badgeEl) {
        const bg = badgeEl.dataset.badgeBg;
        const text = badgeEl.dataset.badgeText;
        if (bg) badgeEl.style.backgroundColor = bg;
        if (text) badgeEl.style.color = text;
    }
}

function initPlanColorPreviews() {
    // Initialize for all found previews
    document.querySelectorAll('[id^="cta-preview-"]').forEach(el => {
        const planId = el.id.replace('cta-preview-', '');
        applyPlanColorPreviews(planId);
    });
    document.querySelectorAll('[id^="accent-preview-"]').forEach(el => {
        const planId = el.id.replace('accent-preview-', '');
        applyPlanColorPreviews(planId);
    });
    document.querySelectorAll('[id^="badge-preview-"]').forEach(el => {
        const planId = el.id.replace('badge-preview-', '');
        applyPlanColorPreviews(planId);
    });
}

// Update preview when any color input changes
function bindColorInputs() {
    document.addEventListener('change', function (e) {
        const t = e.target;
        if (!t.matches('input[type="color"][name^="plans["]')) return;
        const m = t.name.match(/^plans\[(\d+)\]\[(.+)\]$/);
        if (!m) return;
        const planId = m[1];
        const key = m[2];
        switch (key) {
            case 'cta_from_hex': {
                const el = document.getElementById('cta-preview-' + planId);
                if (el) el.dataset.ctaFrom = t.value;
                break;
            }
            case 'cta_to_hex': {
                const el = document.getElementById('cta-preview-' + planId);
                if (el) el.dataset.ctaTo = t.value;
                break;
            }
            case 'card_accent_from_hex': {
                const el = document.getElementById('accent-preview-' + planId);
                if (el) el.dataset.accentFrom = t.value;
                break;
            }
            case 'card_accent_to_hex': {
                const el = document.getElementById('accent-preview-' + planId);
                if (el) el.dataset.accentTo = t.value;
                break;
            }
            case 'badge_bg_hex': {
                const el = document.getElementById('badge-preview-' + planId);
                if (el) el.dataset.badgeBg = t.value;
                break;
            }
            case 'badge_text_hex': {
                const el = document.getElementById('badge-preview-' + planId);
                if (el) el.dataset.badgeText = t.value;
                break;
            }
        }
        applyPlanColorPreviews(planId);
    });
}

document.addEventListener('DOMContentLoaded', function () {
    initPlanColorPreviews();
    bindColorInputs();
});
</script>
@endsection