<div class="sa-card mb-8">
    <div class="flex justify-between items-center mb-8">
        <div>
            <h3 class="text-2xl font-bold">Create New SaaS Plan</h3>
            <p class="text-muted">Define pricing and resource limits for a new subscription tier.</p>
        </div>
    </div>

    <form action="<?= APP_URL ?>/superadmin/plans/create" method="POST">
        <?= Security::csrfField() ?>
        
        <div class="grid-2 gap-8 mb-8" style="grid-template-columns: 2fr 1fr;">
            <div>
                <div class="text-xs text-muted font-bold tracking-widest uppercase mb-4 opacity-50">General Info</div>
                <div class="form-group">
                    <label class="form-label text-sm">Plan Name <span class="required">*</span></label>
                    <input type="text" name="name" class="form-control" required placeholder="e.g. Professional Pack">
                </div>

                <div class="text-xs text-muted font-bold tracking-widest uppercase mt-8 mb-4 opacity-50">Pricing Configuration (GHS)</div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label text-sm">Monthly Price <span class="required">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">GH₵</span>
                            <input type="number" name="price_monthly" step="0.01" class="form-control" placeholder="29.00" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label text-sm">Yearly Price <span class="required">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">GH₵</span>
                            <input type="number" name="price_yearly" step="0.01" class="form-control" placeholder="290.00" required>
                        </div>
                    </div>
                </div>

                <div class="text-xs text-muted font-bold tracking-widest uppercase mt-8 mb-4 opacity-50">Resource Limits (-1 for unlimited)</div>
                <div class="grid-2 gap-4">
                    <div class="form-group">
                        <label class="form-label text-xs">Max Products</label>
                        <input type="number" name="max_products" class="form-control" value="500">
                    </div>
                    <div class="form-group">
                        <label class="form-label text-xs">Max Users</label>
                        <input type="number" name="max_users" class="form-control" value="10">
                    </div>
                    <div class="form-group">
                        <label class="form-label text-xs">Max Locations</label>
                        <input type="number" name="max_locations" class="form-control" value="3">
                    </div>
                    <div class="form-group">
                        <label class="form-label text-xs">Storage (MB)</label>
                        <input type="number" name="storage_mb" class="form-control" value="1024">
                    </div>
                </div>
            </div>

            <div>
                 <div class="text-xs text-muted font-bold tracking-widest uppercase mb-4 opacity-50">Feature Gating</div>
                 <div class="sa-card bg-raised">
                    <div class="form-group flex items-center gap-3 mb-4">
                        <label class="form-switch">
                            <input type="checkbox" name="features[reports_advanced]" value="1" class="switch-input" checked>
                            <div class="switch-track"></div>
                            <span class="switch-label text-xs">Advanced Reporting</span>
                        </label>
                    </div>
                    <div class="form-group flex items-center gap-3 mb-4">
                        <label class="form-switch">
                            <input type="checkbox" name="features[batch_tracking]" value="1" class="switch-input" checked>
                            <div class="switch-track"></div>
                            <span class="switch-label text-xs">Batch & Expiry Tracking</span>
                        </label>
                    </div>
                    <div class="form-group flex items-center gap-3 mb-4">
                        <label class="form-switch">
                            <input type="checkbox" name="features[invoice]" value="1" class="switch-input" checked>
                            <div class="switch-track"></div>
                            <span class="switch-label text-xs">A4 Invoice Customization</span>
                        </label>
                    </div>
                    <div class="form-group flex items-center gap-3 mb-4">
                        <label class="form-switch">
                            <input type="checkbox" name="features[api_access]" value="1" class="switch-input">
                            <div class="switch-track"></div>
                            <span class="switch-label text-xs">Developer API Access</span>
                        </label>
                    </div>
                    <div class="form-group flex items-center gap-3">
                        <label class="form-switch">
                            <input type="checkbox" name="features[multi_warehouse]" value="1" class="switch-input">
                            <div class="switch-track"></div>
                            <span class="switch-label text-xs">Multi-Warehouse Management</span>
                        </label>
                    </div>
                 </div>

                 <p class="text-xs text-muted mt-6 p-4 border border-dashed rounded" style="border-color: var(--sa-border);">
                    New plans are activated immediately upon save. Businesses on existing plans will remain on their current configuration unless manually updated.
                 </p>
            </div>
        </div>

        <div class="flex justify-end gap-3 mt-8 pt-8" style="border-top: 1px solid var(--sa-border);">
            <a href="<?= APP_URL ?>/superadmin/plans" class="btn btn-outline" style="padding: 10px 24px;">Cancel</a>
            <button type="submit" class="btn btn-sa-primary py-2 px-8">Save & Publish Plan</button>
        </div>
    </form>
</div>
