@extends('layouts.app')

@section('title','Campaign Details')
@section('page_title','Campaign Details')

@section('content')

<div style="background:#fff;padding:24px;border-radius:10px;margin-bottom:20px;">

    <h3 style="font-size:22px;font-weight:bold;margin-bottom:8px;">
        {{ $campaign->campaign_name }}
    </h3>

    <p style="color:#6b7280;margin-bottom:8px;">
        {{ $campaign->description ?? 'No description' }}
    </p>

    <p>
        <b>Status:</b> {{ ucfirst($campaign->status) }}
    </p>

</div>

<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:25px;">

    <div style="background:#fff;padding:22px;border-radius:10px;border-left:5px solid #2563eb;">
        <h3>Total Sent</h3>
        <p style="font-size:30px;font-weight:bold;">{{ $totalSent }}</p>
    </div>

    <div style="background:#fff;padding:22px;border-radius:10px;border-left:5px solid #16a34a;">
        <h3>Opened</h3>
        <p style="font-size:30px;font-weight:bold;">{{ $totalOpened }}</p>
    </div>

    <div style="background:#fff;padding:22px;border-radius:10px;border-left:5px solid #f59e0b;">
        <h3>Clicks</h3>
        <p style="font-size:30px;font-weight:bold;">{{ $totalClicks }}</p>
    </div>

    <div style="background:#fff;padding:22px;border-radius:10px;border-left:5px solid #dc2626;">
        <h3>Failed</h3>
        <p style="font-size:30px;font-weight:bold;">{{ $totalFailed }}</p>
    </div>

    <div style="background:#fff;padding:22px;border-radius:10px;border-left:5px solid #7c3aed;">
        <h3>Open Rate</h3>
        <p style="font-size:30px;font-weight:bold;">{{ $openRate }}%</p>
    </div>

    <div style="background:#fff;padding:22px;border-radius:10px;border-left:5px solid #0f766e;">
        <h3>Click Rate</h3>
        <p style="font-size:30px;font-weight:bold;">{{ $clickRate }}%</p>
    </div>

</div>

<div style="background:#fff;padding:24px;border-radius:10px;">

    <h3 style="font-size:18px;font-weight:bold;margin-bottom:15px;">
        Campaign Emails
    </h3>

    <table style="width:100%;border-collapse:collapse;">
        <thead>
            <tr style="background:#e5e7eb;">
                <th style="padding:12px;text-align:left;">To Email</th>
                <th style="padding:12px;text-align:left;">Subject</th>
                <th style="padding:12px;text-align:left;">Status</th>
                <th style="padding:12px;text-align:left;">Clicks</th>
                <th style="padding:12px;text-align:left;">Sent At</th>
                <th style="padding:12px;text-align:left;">Action</th>
            </tr>
        </thead>

        <tbody>
            @forelse($campaign->emails as $email)
                <tr style="border-bottom:1px solid #ddd;">
                    <td style="padding:12px;">
                        {{ $email->to_email ?? '-' }}
                    </td>

                    <td style="padding:12px;">
                        {{ $email->subject ?? '-' }}
                    </td>

                    <td style="padding:12px;">
                        @if($email->reminder_type == 'email_failed')
                            <span style="background:#fee2e2;color:#991b1b;padding:4px 8px;border-radius:4px;">
                                Failed
                            </span>
                        @elseif($email->is_opened)
                            <span style="background:#dbeafe;color:#1d4ed8;padding:4px 8px;border-radius:4px;">
                                Opened
                            </span>
                        @else
                            <span style="background:#dcfce7;color:#166534;padding:4px 8px;border-radius:4px;">
                                Sent
                            </span>
                        @endif
                    </td>

                    <td style="padding:12px;">
                        {{ $email->clicks->count() }}
                    </td>

                    <td style="padding:12px;">
                        {{ $email->sent_at ?? $email->created_at }}
                    </td>

                    <td style="padding:12px;">
                        <a href="{{ route('email.history.show',$email->id) }}"
                           style="background:#2563eb;color:#fff;padding:6px 10px;border-radius:4px;text-decoration:none;">
                            View
                        </a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" style="padding:15px;text-align:center;color:#6b7280;">
                        No emails found for this campaign.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>

</div>

<div style="margin-top:20px;">
    <a href="{{ route('email.campaigns') }}"
       style="background:#6b7280;color:#fff;padding:10px 15px;border-radius:6px;text-decoration:none;">
        Back
    </a>
</div>

@endsection