@include('admin.header')

<div class="main-wrapper">

    @include('admin.topbar')
    @include('admin.leftbar')

    <div class="page-wrapper">

        <div class="content">

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">Email History</h4>
                </div>

                <div class="card-body">

                    <div class="table-responsive">
                        <table class="table table-bordered table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Subject</th>
                                    <th>Total Recipients</th>
                                    <th>Sent</th>
                                    <th>Failed</th>
                                    <th>Status</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>

                            <tbody>
                                @forelse($campaigns as $key => $campaign)
                                <tr>
                                    <td>{{ $campaigns->firstItem() + $key }}</td>

                                    <td>
                                        <strong>{{ $campaign->subject }}</strong>
                                    </td>

                                    <td>{{ $campaign->total_recipients }}</td>

                                    <td>
                                        <span class="badge bg-success">
                                            {{ $campaign->sent_count }}
                                        </span>
                                    </td>

                                    <td>
                                        <span class="badge bg-danger">
                                            {{ $campaign->failed_count }}
                                        </span>
                                    </td>

                                    <td>
                                        @if($campaign->status == 'completed')
                                        <span class="badge bg-primary">Completed</span>
                                        @elseif($campaign->status == 'processing')
                                        <span class="badge bg-warning">Processing</span>
                                        @elseif($campaign->status == 'failed')
                                        <span class="badge bg-danger">Failed</span>
                                        @else
                                        <span class="badge bg-secondary">{{ $campaign->status }}</span>
                                        @endif
                                    </td>

                                    <td>
                                        {{ \Carbon\Carbon::parse($campaign->created_at)->format('d M Y, h:i A') }}
                                    </td>
                                    <td>
                                        <button
                                            type="button"
                                            class="btn btn-sm btn-primary view-campaign"
                                            data-id="{{ $campaign->id }}">
                                            View
                                        </button>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted">
                                        No email campaigns found
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-3 d-flex justify-content-end">
                        {{ $campaigns->links('pagination::bootstrap-5') }}
                    </div>

                </div>
            </div>
        </div>

        @include('admin.footer')
        
    </div>

</div>

<div class="modal fade"
    id="campaignViewModal"
    tabindex="-1">
    <div class="modal-dialog modal-xl">

        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">
                    Email Campaign Details
                </h5>

                <button type="button"
                    class="btn-close"
                    data-bs-dismiss="modal">
                </button>
            </div>

            <div class="modal-body">

                <div id="campaign-details"></div>

                <hr>

                <h5>Recipients</h5>

                <div class="table-responsive">

                    <table class="table table-bordered">

                        <thead>
                            <tr>
                                <th>Email</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Error</th>
                                <th>Sent At</th>
                            </tr>
                        </thead>

                        <tbody id="recipient-list"></tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@include('admin.scripts')

<script>
    $(document).on('click', '.view-campaign', function() {

        let id = $(this).data('id');
        $.ajax({
            url: _BaseURL + 'email-history/view/' + id,
            type: 'GET',

            success: function(response) {

                if (response.success == 1) {

                    let campaign =
                        response.campaign;

                    $('#campaign-details').html(`
                        <div class="row">

                            <div class="col-md-6">
                                <strong>Subject:</strong>
                                ${campaign.subject}
                            </div>

                            <div class="col-md-3">
                                <strong>Total:</strong>
                                ${campaign.total_recipients}
                            </div>

                            <div class="col-md-3">
                                <strong>Status:</strong>
                                ${campaign.status}
                            </div>

                        </div>

                        <hr>

                        <div>
                            <strong>Body:</strong>
                            <div class="border p-3 mt-2">
                                ${campaign.body}
                            </div>
                        </div>
                    `);

                    let rows = '';

                    response.recipients.forEach(
                        function(item) {

                            rows += `
                                <tr>
                                    <td>${item.email}</td>
                                    <td>${item.recipient_type.toUpperCase()}</td>
                                    <td>${item.status}</td>
                                    <td>
                                        ${item.error_message ?? ''}
                                    </td>
                                    <td>
                                        ${item.sent_at ?? ''}
                                    </td>
                                </tr>
                            `;
                        }
                    );

                    $('#recipient-list')
                        .html(rows);

                    $('#campaignViewModal')
                        .modal('show');
                }
            }
        });
    });
</script>

</body>

</html>