@extends('layouts.admin')

@section('title', 'Plans & Subscriptions')

@section('content')
<div class="space-y-8">
    <!-- Header Row -->
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-extrabold text-white tracking-tight">Recurring Plans & Subscriptions</h2>
            <p class="text-xs text-slate-400 mt-1">Configure subscription pricing tiers, billing cycles, and active client renewals.</p>
        </div>
        <div class="flex items-center gap-3">
            <button onclick="openAssignPlanModal()" class="flex items-center gap-2 bg-slate-800 hover:bg-slate-700 text-white font-semibold text-xs px-4 py-2.5 rounded-xl border border-slate-700 transition-all">
                <i data-lucide="user-check" class="w-4 h-4 text-indigo-400"></i>
                <span>Assign Plan to Client</span>
            </button>
            <button onclick="openCreatePlanModal()" class="flex items-center gap-2 bg-gradient-to-r from-brand-600 to-indigo-600 hover:from-brand-500 hover:to-indigo-500 text-white font-semibold text-xs px-4 py-2.5 rounded-xl shadow-lg shadow-brand-500/25 transition-all">
                <i data-lucide="plus" class="w-4 h-4"></i>
                <span>Create New Plan Tier</span>
            </button>
        </div>
    </div>

    <!-- Subscription Plans Tiers Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        @foreach($plans as $plan)
            <div class="glass-card rounded-2xl p-6 relative overflow-hidden flex flex-col justify-between border hover:border-slate-700 transition-all">
                <div>
                    <div class="flex items-center justify-between mb-4">
                        <span class="text-xs font-bold uppercase tracking-wider text-indigo-400 bg-indigo-500/10 px-2.5 py-1 rounded-full border border-indigo-500/20">
                            {{ $plan->billing_cycle }}
                        </span>
                        <span class="text-xs text-slate-400 flex items-center gap-1">
                            <i data-lucide="users" class="w-3.5 h-3.5 text-slate-500"></i>
                            <span>{{ $plan->subscriptions_count }} Subscribers</span>
                        </span>
                    </div>

                    <h3 class="text-lg font-extrabold text-white mb-1">{{ $plan->name }}</h3>
                    <div class="flex items-baseline gap-1 my-3">
                        <span class="text-3xl font-extrabold text-white">${{ number_format($plan->price, 0) }}</span>
                        <span class="text-xs text-slate-400">/{{ strtolower($plan->billing_cycle) }}</span>
                    </div>
                    <p class="text-xs text-slate-400 mb-4">{{ $plan->description }}</p>

                    <ul class="space-y-2 text-xs text-slate-300">
                        @if(is_array($plan->features))
                            @foreach($plan->features as $feat)
                                <li class="flex items-center gap-2">
                                    <i data-lucide="check" class="w-3.5 h-3.5 text-emerald-400 shrink-0"></i>
                                    <span>{{ $feat }}</span>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>

                <div class="mt-6 pt-4 border-t border-slate-800 text-center">
                    <button onclick="openAssignPlanModal({{ $plan->id }})" class="w-full bg-slate-900 hover:bg-slate-800 text-indigo-400 text-xs font-semibold py-2 rounded-xl border border-slate-800">
                        Assign to Client
                    </button>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Active Client Subscriptions Table -->
    <div class="glass-card rounded-2xl p-6">
        <div class="flex items-center justify-between mb-6">
            <div>
                <h3 class="text-base font-bold text-white">Active Client Subscriptions</h3>
                <p class="text-xs text-slate-400">Live recurring billing status per enterprise account</p>
            </div>
            <span class="text-xs text-slate-400 font-medium">Total {{ $subscriptions->total() }} Subscriptions</span>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-300">
                <thead class="bg-slate-900/90 text-slate-400 uppercase text-[10px] font-bold tracking-wider border-b border-slate-800">
                    <tr>
                        <th class="py-4 px-6">Client / Company</th>
                        <th class="py-4 px-6">Plan Name</th>
                        <th class="py-4 px-6">Monthly Rate</th>
                        <th class="py-4 px-6">Start Date</th>
                        <th class="py-4 px-6">Next Renewal</th>
                        <th class="py-4 px-6">Status</th>
                        <th class="py-4 px-6 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60 font-medium">
                    @forelse($subscriptions as $sub)
                        <tr class="hover:bg-slate-900/40 transition-colors">
                            <td class="py-4 px-6">
                                <p class="text-xs font-bold text-white">{{ $sub->client->company ?? 'N/A' }}</p>
                                <p class="text-[11px] text-slate-400">{{ $sub->client->email ?? '' }}</p>
                            </td>
                            <td class="py-4 px-6 font-bold text-indigo-400">{{ $sub->plan->name ?? 'N/A' }}</td>
                            <td class="py-4 px-6 font-bold text-white">${{ number_format($sub->plan->price ?? 0, 2) }}</td>
                            <td class="py-4 px-6 text-slate-400">{{ $sub->starts_at->format('M d, Y') }}</td>
                            <td class="py-4 px-6 text-slate-300 font-mono">{{ $sub->renews_at->format('M d, Y') }}</td>
                            <td class="py-4 px-6">
                                @if($sub->status === 'Active')
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> Active
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20">
                                        <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span> Paused
                                    </span>
                                @endif
                            </td>
                            <td class="py-4 px-6 text-right">
                                <form action="{{ route('admin.subscriptions.toggleStatus', $sub) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="px-3 py-1.5 rounded-lg text-xs font-semibold {{ $sub->status === 'Active' ? 'bg-amber-500/10 text-amber-400 border border-amber-500/20 hover:bg-amber-500/20' : 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 hover:bg-emerald-500/20' }}">
                                        {{ $sub->status === 'Active' ? 'Pause' : 'Activate' }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-8 text-center text-slate-500">No client subscriptions found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="p-4 border-t border-slate-800">
            {{ $subscriptions->links() }}
        </div>
    </div>
</div>

<!-- Modal: Create New Plan Tier -->
<div id="createPlanModal" class="fixed inset-0 z-[9999] hidden bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl max-w-md w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-slate-800 pb-3">
            <h3 class="text-lg font-bold text-white flex items-center gap-2">
                <i data-lucide="plus" class="w-5 h-5 text-indigo-400"></i>
                <span>Create Subscription Plan</span>
            </h3>
            <button onclick="closeCreatePlanModal()" class="text-slate-400 hover:text-white">&times;</button>
        </div>

        <form action="{{ route('admin.subscriptions.storePlan') }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label class="block text-xs font-semibold text-slate-300 mb-1">Plan Name</label>
                <input type="text" name="name" required placeholder="e.g. Pro SaaS Suite" class="w-full bg-slate-950 border border-slate-800 text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-indigo-500 focus:outline-none">
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Price ($)</label>
                    <input type="number" step="0.01" name="price" required placeholder="149.00" class="w-full bg-slate-950 border border-slate-800 text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-indigo-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Billing Cycle</label>
                    <select name="billing_cycle" class="w-full bg-slate-950 border border-slate-800 text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-indigo-500 focus:outline-none">
                        <option value="Monthly">Monthly</option>
                        <option value="Quarterly">Quarterly</option>
                        <option value="Annual">Annual</option>
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-300 mb-1">Description</label>
                <textarea name="description" rows="2" placeholder="Brief overview of features included..." class="w-full bg-slate-950 border border-slate-800 text-slate-100 text-xs rounded-xl px-3 py-2 focus:border-indigo-500 focus:outline-none"></textarea>
            </div>

            <div class="flex items-center justify-end gap-3 pt-3 border-t border-slate-800">
                <button type="button" onclick="closeCreatePlanModal()" class="px-4 py-2 text-xs font-semibold text-slate-400 hover:text-white">Cancel</button>
                <button type="submit" class="bg-indigo-600 hover:bg-indigo-500 text-white font-semibold text-xs px-4 py-2 rounded-xl">Save Plan</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal: Assign Plan to Client -->
<div id="assignPlanModal" class="fixed inset-0 z-[9999] hidden bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl max-w-md w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-slate-800 pb-3">
            <h3 class="text-lg font-bold text-white flex items-center gap-2">
                <i data-lucide="user-check" class="w-5 h-5 text-indigo-400"></i>
                <span>Assign Subscription</span>
            </h3>
            <button onclick="closeAssignPlanModal()" class="text-slate-400 hover:text-white">&times;</button>
        </div>

        <form action="{{ route('admin.subscriptions.storeSubscription') }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label class="block text-xs font-semibold text-slate-300 mb-1">Select Client</label>
                <select name="client_id" required class="w-full bg-slate-950 border border-slate-800 text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-indigo-500">
                    @foreach($clients as $c)
                        <option value="{{ $c->id }}">{{ $c->company }} ({{ $c->name }})</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-300 mb-1">Select Plan Tier</label>
                <select id="assign_plan_select" name="subscription_plan_id" required class="w-full bg-slate-950 border border-slate-800 text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-indigo-500">
                    @foreach($plans as $p)
                        <option value="{{ $p->id }}">{{ $p->name }} - ${{ $p->price }}/{{ strtolower($p->billing_cycle) }}</option>
                    @endforeach
                </select>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Start Date</label>
                    <input type="date" name="starts_at" value="{{ date('Y-m-d') }}" required class="w-full bg-slate-950 border border-slate-800 text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-indigo-500">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Next Renewal</label>
                    <input type="date" name="renews_at" value="{{ date('Y-m-d', strtotime('+30 days')) }}" required class="w-full bg-slate-950 border border-slate-800 text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-indigo-500">
                </div>
            </div>

            <div class="flex items-center justify-end gap-3 pt-3 border-t border-slate-800">
                <button type="button" onclick="closeAssignPlanModal()" class="px-4 py-2 text-xs font-semibold text-slate-400 hover:text-white">Cancel</button>
                <button type="submit" class="bg-indigo-600 hover:bg-indigo-500 text-white font-semibold text-xs px-4 py-2 rounded-xl">Assign Subscription</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function openCreatePlanModal() {
        document.getElementById('createPlanModal').classList.remove('hidden');
    }
    function closeCreatePlanModal() {
        document.getElementById('createPlanModal').classList.add('hidden');
    }
    function openAssignPlanModal(planId = null) {
        if(planId) {
            document.getElementById('assign_plan_select').value = planId;
        }
        document.getElementById('assignPlanModal').classList.remove('hidden');
    }
    function closeAssignPlanModal() {
        document.getElementById('assignPlanModal').classList.add('hidden');
    }
</script>
@endpush
