import React, { useState } from 'react'; import { Head } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; import { CreditCard, CheckCircle2, AlertCircle, ArrowRight, Sparkles, FileText, Download, ShieldCheck, Clock, User, Building, Check, Lock, RefreshCw, X, TrendingUp } from 'lucide-react'; import { toast } from 'sonner'; export default function Subscription({ currentPlan, expiresAt, plans }) { const [selectedPlan, setSelectedPlan] = useState(null); const [showPayTabsModal, setShowPayTabsModal] = useState(false); const [showSuccess, setShowSuccess] = useState(false); // Card inputs for PayTabs Gateway const [cardName, setCardName] = useState(''); const [cardNumber, setCardNumber] = useState(''); const [cardExpiry, setCardExpiry] = useState(''); const [cardCvv, setCardCvv] = useState(''); const [billingEmail, setBillingEmail] = useState('sponsor@marketplace.ae'); // Failed payment simulation const [simulatedFailedState, setSimulatedFailedState] = useState(false); const [activePlan, setActivePlan] = useState(currentPlan || 'Premium Employer Pass'); // Payment History List const [invoices, setInvoices] = useState([ { id: 'INV-2026-001', date: 'May 01, 2026', amount: '199 AED', status: 'Paid', plan: 'Premium Employer Pass' }, { id: 'INV-2026-002', date: 'Apr 01, 2026', amount: '199 AED', status: 'Paid', plan: 'Premium Employer Pass' }, { id: 'INV-2026-003', date: 'Mar 01, 2026', amount: '99 AED', status: 'Refunded', plan: 'Basic Search' } ]); const handleSelectPlan = (plan) => { setSelectedPlan(plan); setShowPayTabsModal(true); }; const handlePayTabsSubmit = (e) => { e.preventDefault(); if (cardNumber.length < 16) { toast.error("💳 Invalid card number format"); return; } setShowPayTabsModal(false); setShowSuccess(true); setActivePlan(selectedPlan.name); // Add to invoices const newInvoice = { id: `INV-2026-0${invoices.length + 1}`, date: 'Today', amount: selectedPlan.price, status: 'Paid', plan: selectedPlan.name }; setInvoices([newInvoice, ...invoices]); toast.success(`🎉 Payment Approved by PayTabs!`, { description: `Successfully subscribed to ${selectedPlan.name}. Premium access limits updated instantly.`, duration: 5000, }); // Reset forms setCardName(''); setCardNumber(''); setCardExpiry(''); setCardCvv(''); setTimeout(() => setShowSuccess(false), 5000); }; const triggerFailedPaymentSimulation = () => { setSimulatedFailedState(true); toast.warning("Simulated billing failure triggered!", { description: "An automatic system warning will now request payment retry options." }); }; const handleRetryPayment = () => { const premium = plans.find(p => p.id === 'premium') || plans[0]; setSelectedPlan(premium); setShowPayTabsModal(true); setSimulatedFailedState(false); }; const downloadReceipt = (invoiceId) => { toast.success(`📄 Invoice ${invoiceId} generated`, { description: "Direct MOHRE Sponsor receipt downloaded in PDF format successfully." }); }; return (
{/* Simulated payment failed retry block */} {simulatedFailedState && (

Your recurrent subscription billing has FAILED!

Card renewal on May 22 failed due to insufficient funds. Retry using PayTabs to avoid profile lockout.

)} {/* Current Active Plan status banner */}
Active Plan Pass

{activePlan}

Renewing via auto-payment on {expiresAt}

Verified Sponsor Status
{showSuccess && (
Sponsor Pass updated successfully! PayTabs transaction logged.
)} {/* Available Plan Tiers Pricing Grid */}

Available Subscription Tiers

Upgrade or cancel anytime. All contracts compliant with UAE Tadbeer MOHRE guides.

{plans.map((plan) => { const isCurrent = activePlan.toLowerCase().includes(plan.id.toLowerCase()); return (
{plan.popular && (
Most Popular Tier
)}

{plan.name}

{plan.price} / {plan.period}
    {plan.features.map(f => (
  • {f}
    • ))}
); })}
{/* Payment History & Invoice logs */}
{/* Invoice Logs */}

Billing Payment Receipts

Tax Compliant invoices
{invoices.map((inv) => (
{inv.plan} ({inv.id})
Billed: {inv.date}
{inv.amount}
{inv.status}
))}
{/* Sponsor Billing Details Form */}

Corporate Details

Update tax invoicing options.

setBillingEmail(e.target.value)} className="w-full p-2.5 border border-slate-200 rounded-xl bg-slate-50/50" />
{/* Interactive PayTabs Checkout Modal Overlay */} {showPayTabsModal && selectedPlan && (
{/* PayTabs Header */}
PayTabs Secured Checkout
Gateway v4.0
{/* Order Summary */}
Order description
{selectedPlan.name} Subscription
Total amount
{selectedPlan.price}
{/* PayTabs CC Form */}
setCardName(e.target.value)} className="w-full p-2.5 border border-slate-300 rounded-xl" required />
setCardNumber(e.target.value.replace(/\D/g, ''))} className="w-full p-2.5 border border-slate-300 rounded-xl font-mono text-sm" required />
setCardExpiry(e.target.value)} className="w-full p-2.5 border border-slate-300 rounded-xl" required />
setCardCvv(e.target.value.replace(/\D/g, ''))} className="w-full p-2.5 border border-slate-300 rounded-xl font-mono text-sm" required />
256-bit PCI DSS Cryptography Protected
)} ); }