@extends('layouts.dashboard')

@section('title', 'Subscription Revenue')
@section('header', 'Subscription Revenue Analytics')

@section('sidebar')
@include('super-admin.partials.sidebar')
@endsection

@section('content')
<div class="mb-4">
    <a href="{{ route('super-admin.analytics.index') }}" class="text-blue-600 hover:text-blue-800 mb-4 inline-block">
        ← Back to Analytics
    </a>
</div>

<!-- Date Range Filter -->
<div class="bg-white rounded-lg shadow p-4 mb-6">
    <form method="GET" action="{{ route('super-admin.analytics.subscription-revenue') }}" class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
            <input type="date" name="start_date" value="{{ $startDate->format('Y-m-d') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
            <input type="date" name="end_date" value="{{ $endDate->format('Y-m-d') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md">
        </div>
        <div class="flex items-end">
            <button type="submit" class="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">Filter</button>
        </div>
    </form>
</div>

<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="p-6 border-b border-gray-200">
        <h3 class="text-lg font-semibold">Revenue by Subscription Plan</h3>
        <p class="text-sm text-gray-500">Period: {{ $startDate->format('M d, Y') }} - {{ $endDate->format('M d, Y') }}</p>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Plan Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Subscriptions</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Total Revenue</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($revenue as $planName => $data)
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $planName }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $data['count'] }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">{{ number_format($data['revenue'], 0) }} TZS</td>
                </tr>
                @empty
                <tr>
                    <td colspan="3" class="px-6 py-4 text-center text-sm text-gray-500">No revenue data found for this period.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($revenue->count() > 0)
    <div class="p-6 border-t border-gray-200 bg-gray-50">
        <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-gray-700">Total Revenue:</span>
            <span class="text-lg font-bold text-blue-600">{{ number_format($revenue->sum('revenue'), 0) }} TZS</span>
        </div>
    </div>
    @endif
</div>
@endsection