@extends('layouts.app')

@section('content')

<style>
    .page-title { color:#1E4FA8; font-size:26px; font-weight:900; margin-bottom:14px; }
    .card { background:#fff; border:2px solid #1E4FA8; border-radius:8px; margin-bottom:14px; padding:14px; }
    .btn { background:#1E4FA8; border:1px solid #1E4FA8; border-radius:8px; color:#fff; display:inline-block; font-weight:900; padding:9px 12px; text-decoration:none; }
    table { border-collapse:collapse; width:100%; }
    th, td { border:1px solid #0c0c0c; padding:8px; text-align:left; }
    th { background:#1E4FA8; color:#fff; }
    .summary { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
    .summary div { border:1px solid #0c0c0c; border-radius:8px; padding:10px; }
    .summary strong { color:#1E4FA8; display:block; font-size:20px; }
</style>

<div class="page-title">SMS Campaign {{ $campaign->campaign_no }}</div>

<div class="card">
    <a class="btn" href="{{ url('/bulk_sms') }}">Back to Bulk SMS</a>
</div>

<div class="card summary">
    <div>Name<strong>{{ $campaign->name }}</strong></div>
    <div>Status<strong>{{ ucfirst($campaign->status) }}</strong></div>
    <div>Recipients<strong>{{ number_format($campaign->recipient_count) }}</strong></div>
    <div>SMS Units<strong>{{ number_format($campaign->sms_units) }}</strong></div>
    <div>Estimated Cost<strong>{{ number_format($campaign->estimated_cost, 2) }}</strong></div>
    <div>Added By<strong>{{ $campaign->user?->name ?: '-' }}</strong></div>
</div>

<div class="card">
    <h3>Message</h3>
    <p>{{ $campaign->message }}</p>
</div>

<div class="card" style="overflow-x:auto;">
    <h3>Recipients</h3>
    <table>
        <thead><tr><th>Name</th><th>Phone</th><th>Status</th><th>Failure Reason</th></tr></thead>
        <tbody>
            @forelse($campaign->recipients as $recipient)
                <tr>
                    <td>{{ $recipient->name ?: '-' }}</td>
                    <td>{{ $recipient->phone }}</td>
                    <td>{{ ucfirst($recipient->status) }}</td>
                    <td>{{ $recipient->failure_reason ?: '-' }}</td>
                </tr>
            @empty
                <tr><td colspan="4">No recipients found.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

@endsection