@extends('admin.layouts.app')

@section('content')

<div class="p-6 space-y-6">

    {{-- Stats Cards --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

        <div class="bg-gray-900 p-6 rounded-xl shadow hover:scale-105 transition">
            <h3 class="text-gray-400">Total Subscriptions</h3>
            <p class="text-2xl font-bold text-white">
                {{ \App\Models\Subscription::count() }}
            </p>
        </div>

        <div class="bg-gray-900 p-6 rounded-xl shadow hover:scale-105 transition">
            <h3 class="text-gray-400">Active Subscriptions</h3>
            <p class="text-2xl font-bold text-green-400">
                {{ \App\Models\Subscription::where('status','active')->count() }}
            </p>
        </div>

        <div class="bg-gray-900 p-6 rounded-xl shadow hover:scale-105 transition">
            <h3 class="text-gray-400">Revenue</h3>
            <p class="text-2xl font-bold text-yellow-400">
                GH₵{{ number_format($monthlyRevenue,2) }}
            </p>
        </div>

    </div>

    {{-- Revenue Chart --}}
    <div class="bg-gray-900 p-6 rounded-xl shadow">
        <canvas id="revenueChart"></canvas>
    </div>

    {{-- Table --}}
    <div class="bg-gray-900 rounded-xl shadow overflow-x-auto">
        <table class="min-w-full text-left text-gray-300">
            <thead class="bg-gray-800 uppercase text-sm">
                <tr>
                    <th class="px-6 py-4">Date</th>
                    <th class="px-6 py-4">User</th>
                    <th class="px-6 py-4">Plan</th>
                    <th class="px-6 py-4">Amount</th>
                    <th class="px-6 py-4">Status</th>
                    <th class="px-6 py-4">Action</th>
                </tr>
            </thead>

            <tbody class="divide-y divide-gray-800">

                @foreach($subscriptions as $sub)
                <tr class="hover:bg-gray-800 transition">

                    <td class="px-6 py-4">
                        {{ $sub->created_at->format('M d, Y') }}
                    </td>

                    <td class="px-6 py-4">
                        {{ $sub->user->name ?? 'N/A' }}
                    </td>

                    <td class="px-6 py-4">
                        {{ ucfirst($sub->plan_name) }}
                    </td>

                    <td class="px-6 py-4 text-green-400 font-semibold">
                        GH₵{{ number_format($sub->amount,2) }}
                    </td>

                    <td class="px-6 py-4">
                        <span class="px-3 py-1 rounded-full text-sm
                        {{ $sub->status=='active' ? 'bg-green-600' : 'bg-red-600' }}">
                            {{ ucfirst($sub->status) }}
                        </span>
                    </td>

                    <td class="px-6 py-4">

                        <button
                            onclick="toggleStatus({{ $sub->id }}, '{{ $sub->status }}')"
                            class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-white">
                            Toggle
                        </button>

                    </td>

                </tr>
                @endforeach

            </tbody>
        </table>

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

{{-- Chart JS --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
new Chart(document.getElementById('revenueChart'), {
    type: 'line',
    data: {
        labels: {!! json_encode($chartLabels) !!},
        datasets: [{
            label: 'Revenue (GH₵)',
            data: {!! json_encode($chartValues) !!},
            borderColor: '#22c55e',
            backgroundColor: 'rgba(34,197,94,0.2)',
            fill: true,
            tension: 0.4
        }]
    }
});

function toggleStatus(id, status) {
    let url = status === 'active'
        ? `/admin/subscriptions/${id}/cancel`
        : `/admin/subscriptions/${id}/activate`;

    fetch(url, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    }).then(() => location.reload());
}
</script>

@endsection