import React, { useState } from 'react'; import { Head, router } from '@inertiajs/react'; import AdminLayout from '@/Layouts/AdminLayout'; import { Plus, Edit2, Trash2, Check, X, Info, MoreVertical, DollarSign, Clock, Zap, Shield, Trophy, Search } from 'lucide-react'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; export default function SubscriptionsIndex({ plans: initialPlans }) { const [plans, setPlans] = useState(initialPlans || [ { id: 'basic', name: 'Basic Search', price: 99, duration: 'Monthly', features: ['Browse 500+ workers', '10 Shortlists'], status: 'Active' }, { id: 'premium', name: 'Premium Pass', price: 199, duration: 'Monthly', features: ['Unlimited shortlisting', 'Direct messaging'], status: 'Active' }, { id: 'vip', name: 'VIP Concierge', price: 499, duration: 'Monthly', features: ['Dedicated Manager', '30-day replacement'], status: 'Active' }, ]); const [isDialogOpen, setIsDialogOpen] = useState(false); const [editingPlan, setEditingPlan] = useState(null); const [searchQuery, setSearchQuery] = useState(''); // Form states const [name, setName] = useState(''); const [price, setPrice] = useState(''); const [duration, setDuration] = useState('Monthly'); const [features, setFeatures] = useState(''); const handleCreateClick = () => { setEditingPlan(null); setName(''); setPrice(''); setDuration('Monthly'); setFeatures(''); setIsDialogOpen(true); }; const handleEdit = (plan) => { setEditingPlan(plan); setName(plan.name); setPrice(plan.price); setDuration(plan.duration); setFeatures(plan.features.join('\n')); setIsDialogOpen(true); }; const handleDelete = (id) => { if (confirm('Are you sure you want to delete this plan?')) { setPlans(plans.filter(p => p.id !== id)); } }; const handleSave = (e) => { e.preventDefault(); if (!name.trim() || !price) { alert('Please fill out Name and Price.'); return; } const featuresArray = features .split('\n') .map(f => f.trim()) .filter(Boolean); if (editingPlan) { setPlans(plans.map(p => p.id === editingPlan.id ? { ...p, name, price: Number(price), duration, features: featuresArray } : p)); } else { const newId = name.toLowerCase().replace(/\s+/g, '-'); setPlans([...plans, { id: newId || `plan-${Date.now()}`, name, price: Number(price), duration, features: featuresArray, status: 'Active' }]); } setIsDialogOpen(false); }; const filteredPlans = plans.filter(plan => plan.name.toLowerCase().includes(searchQuery.toLowerCase()) || plan.duration.toLowerCase().includes(searchQuery.toLowerCase()) || plan.features.some(f => f.toLowerCase().includes(searchQuery.toLowerCase())) ); return (

{/* Header Actions */}

setSearchQuery(e.target.value)} className="w-full pl-10 pr-4 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-teal-500/10 focus:border-teal-500 outline-none transition-all" />

{/* Plans Table */}

Plan Name Pricing (AED) Duration Key Features Status Actions {filteredPlans.length === 0 ? ( No plans found ) : ( filteredPlans.map((plan) => (

{plan.id === 'basic' ? : plan.id === 'premium' ? : }

{plan.name}

{plan.price} {plan.duration}

{plan.features.map((f, i) => ( {f} ))}

{plan.status}

)) )}

{/* Plan Modal */}