@extends('layouts.app')

@section('title', 'Sent Messages')

@section('content')
<div class="container-fluid py-4 mt-5">
    <h3 class="mb-4">Sent Messages</h3>
    <p>Manage and view all sent messages associated with your account.</p>
    <p><strong> Note: </strong> We do not store any message content, only metadata for tracking purposes.</p>
    <hr>
    <p><strong>Total Messages:</strong> {{ count($messages) }}</p>
     <!-- Messages Table -->

    @if (session('error'))
        <div class="alert alert-danger">
            <i class="fas fa-exclamation-circle me-2"></i> {{ session('error') }}
        </div>
    @elseif (session('success'))
        <div class="alert alert-success">
            <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
        </div>
        
    @endif

    <table id="viewMessageTable" class="display table table-striped tb-responsive" style="width:100%">
        <thead>
            <tr>
                <th>#</th>
                <th>Instance ID</th>
                <th>WhatsApp Sender</th>
                <th>Recipients</th>
                <th>Message Type</th>
                <th>Message Characters</th>
                <th>Status</th>
                <th>Error Message</th>
                <th>Sent At</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($messages as $index => $message)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $message['instance_id'] ?? 'N/A' }}</td>
                    <td>{{ cleanWhatsAppNumber($message['whatsapp_user_id']) ?? 'N/A' }}</td>
                    <td>{{ cleanWhatsAppNumber($message['recipient']) ?? 'N/A' }}</td>
                    <td>{{ $message['message_type'] ?? 'N/A' }}</td>
                    <td>{{ $message['total_chars'] ?? 0 }}</td>
                    <td>{{ $message['status'] ?? '' }}</td>
                    <td>{{ $message['error_message'] ?? 'N/A' }}</td>
                    <td>{{ $message['sent_at'] ?? 'N/A' }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection

@push('scripts')


<script>
$(document).ready(function() {
    $('#viewMessageTable').DataTable({
        paging: true,
        searching: true,
        ordering: true,
        info: true
    });
});

</script>
@endpush