@extends('layouts.app')

@section('title', 'Campaign Email History')

@section('content')
<div class="container py-5">
    <h2 class="mb-4">Email History for: {{ $campaign->name }}</h2>
<div class="mb-4">
    <h5>Campaign Progress</h5>
    <div class="progress" style="height: 25px;">
        <div id="campaign-progress" class="progress-bar bg-success" role="progressbar" style="width: 0%">
            0%
        </div>
    </div>
    <small id="progress-stats" class="text-muted"></small>
</div>
    <div class="card shadow-sm">
        <div class="card-body">
            @if($emails->count() > 0)
            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>User</th>
                            <th>Email</th>
                            <th>Status</th>
                            <th>Sent/Updated At</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($emails as $email)
                        <tr>
                            <td>
                                {{ $email->user->first_name ?? 'N/A' }} 
                                {{ $email->user->last_name ?? '' }}
                            </td>
                            <td>{{ $email->email }}</td>
                            <td>
                                @if($email->status == 'sent')
                                    <span class="badge bg-success">Sent</span>
                                @elseif($email->status == 'failed')
                                    <span class="badge bg-danger">Failed</span>
                                @else
                                    <span class="badge bg-warning text-dark">Pending</span>
                                @endif
                            </td>
                            <td>{{ $email->updated_at->format('Y-m-d H:i') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-3">
                {{ $emails->links('pagination::bootstrap-5') }}
            </div>
            @else
                <p class="text-center text-muted">No email records found for this campaign.</p>
            @endif

            <div class="mt-3">
                <a href="{{ route('campaigns.history') }}" class="btn btn-secondary">Back to Campaigns</a>
            </div>
        </div>
    </div>
    <script>
    function updateProgress() {
        fetch("{{ route('campaigns.progress', $campaign->id) }}")
            .then(response => response.json())
            .then(data => {
                const progressBar = document.getElementById('campaign-progress');
                progressBar.style.width = data.percentage + '%';
                progressBar.textContent = data.percentage + '%';

                document.getElementById('progress-stats').textContent =
                    `Sent: ${data.sent} | Failed: ${data.failed} | Pending: ${data.pending} | Total: ${data.total}`;
            });
    }

    // Update every 5 seconds
    setInterval(updateProgress, 5000);

    // Initial load
    updateProgress();
</script>
</div>
@endsection