@extends('layouts.app')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <h1 class="text-2xl font-bold text-gray-900">Campaign Reports</h1>
</div>

<!-- High-level Metrics -->
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 mb-8">
    <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Total Campaigns</h3>
        <p class="mt-2 text-3xl font-bold text-gray-900">{{ number_format($totalCampaigns) }}</p>
    </div>
    
    <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Emails Sent</h3>
        <p class="mt-2 text-3xl font-bold text-green-600">{{ number_format($totalEmailsSent) }}</p>
    </div>

    <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Overall Success Rate</h3>
        <p class="mt-2 text-3xl font-bold text-green-600">{{ $successRate }}%</p>
    </div>

    <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Total Clicked</h3>
        <p class="mt-2 text-3xl font-bold text-purple-600">{{ number_format($totalEmailsClicked) }}</p>
    </div>

    <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Total Failed</h3>
        <p class="mt-2 text-3xl font-bold text-red-600">{{ number_format($totalEmailsFailed) }}</p>
    </div>
</div>

<!-- Campaign List -->
<div class="bg-white shadow sm:rounded-lg overflow-hidden border border-gray-200">
    <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
        <h3 class="text-lg leading-6 font-medium text-gray-900">All Campaigns</h3>
        <p class="mt-1 text-sm text-gray-500">Detailed delivery metrics for each campaign.</p>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject & Date</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recipients</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sent</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clicked</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Failed</th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse ($campaigns as $campaign)
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900 truncate max-w-xs">{{ $campaign->subject ?: '(No Subject)' }}</div>
                        <div class="text-sm text-gray-500">{{ $campaign->created_at->format('M d, Y h:i A') }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                            {{ $campaign->status === 'COMPLETED' ? 'bg-green-100 text-green-800' : 
                               ($campaign->status === 'SENDING' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800') }}">
                            {{ $campaign->status }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ $campaign->total_recipients }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <span class="text-green-600 font-medium">{{ $campaign->sent_count }}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <span class="text-purple-600 font-medium">{{ $campaign->clicked_count }}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        @if($campaign->failed_count > 0)
                            <span class="text-red-600 font-bold">{{ $campaign->failed_count }}</span>
                        @else
                            <span class="text-gray-500">0</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="{{ route('reports.show', $campaign->id) }}" class="text-brand hover:text-brand-hover">View Details</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">
                        No campaigns found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="px-4 py-3 border-t border-gray-200 sm:px-6">
        {{ $campaigns->links() }}
    </div>
</div>
@endsection