@extends('layouts.app')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <div>
        <a href="{{ route('dashboard.index') }}" class="text-brand hover:text-brand-hover font-semibold transition">&larr; Back to Dashboard</a>
        <h1 class="text-3xl font-heading tracking-wide mt-4">{{ $campaign->subject }}</h1>
    </div>
    <div class="flex space-x-3">
        <!-- Optional: Duplicate button can go here in the future -->
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Left Column: Content -->
    <div class="lg:col-span-2">
        <div class="bg-white shadow sm:rounded-lg mb-8">
            <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">Email Body</h3>
                <p class="mt-1 text-sm text-gray-500">Preview of the email content that was sent.</p>
            </div>
            <div class="px-4 py-5 sm:p-6 bg-gray-100 rounded-b-lg">
                <iframe 
                    srcdoc="{{ $campaign->getCompiledHtml() }}" 
                    class="w-full border-none rounded shadow bg-white" 
                    style="height: 600px;">
                </iframe>
            </div>
        </div>
    </div>

    <!-- Right Column: Stats & Info -->
    <div class="lg:col-span-1">
        <div class="bg-white shadow sm:rounded-lg">
            <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">Campaign Stats</h3>
            </div>
            <div class="px-4 py-5 sm:p-6">
                <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                    <div class="sm:col-span-1">
                        <dt class="text-sm font-medium text-gray-500">Status</dt>
                        <dd class="mt-1 text-sm font-semibold text-gray-900">
                            <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-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800') }}">
                                {{ $campaign->status }}
                            </span>
                        </dd>
                    </div>
                    <div class="sm:col-span-1">
                        <dt class="text-sm font-medium text-gray-500">Total Recipients</dt>
                        <dd class="mt-1 text-sm font-semibold text-gray-900">{{ $campaign->total_recipients }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-medium text-gray-500 uppercase">Sent</dt>
                        <dd class="mt-1 text-sm font-semibold text-green-600">{{ $campaign->sent_count }}</dd>
                    </div>
                    <div class="sm:col-span-1">
                        <dt class="text-sm font-medium text-gray-500">Failed</dt>
                        <dd class="mt-1 text-sm font-semibold text-red-600">{{ $campaign->failed_count }}</dd>
                    </div>
                    <div class="sm:col-span-2">
                        <dt class="text-sm font-medium text-gray-500">Created At</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $campaign->created_at->format('F j, Y, g:i a') }}</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
</div>
@endsection