@extends('layouts.master')
@section('content')
    <main class="flex-1 overflow-y-auto p-6">
        <div class="bg-dash-surface rounded-xl border border-dash-border shadow-sm mb-6 relative">
            <div class="p-6 border-b border-dash-border flex items-center justify-between">
                <h3 class="text-lg font-semibold">SMS Log</h3>
            </div>
            <div class="relative">
                <div class="overflow-x-auto overflow-visible">
                    <table class="min-w-full divide-y divide-dash-border">
                        <thead class="bg-dash-surface-hover">
                            <tr>
                                <th
                                    class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                    ID</th>
                                <th
                                    class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                    Notification ID</th>

                                <th
                                    class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                    Recipent</th>
                                <th
                                    class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                    Error Message</th>

                                <th
                                    class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                    Status</th>
                                <th
                                    class="px-6 py-4 text-left text-xs font-medium text-dash-text-muted uppercase tracking-wider">
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-dash-border">
                            @forelse($logs as $log)
                                <tr class="hover:bg-dash-surface-hover transition-colors cursor-pointer">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">{{ $loop->iteration }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        {{ $log->notification_id }}
                                    </td>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dash-text-muted">
                                        {{ $log->recipents }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dash-text-muted">
                                        <button type=" button"
                                            class="dropdown-btn flex items-center justify-center w-8 h-8 rounded text-dash-text hover:text-dash-primary"
                                            onclick="openRenderedErrorModal({{ json_encode($log->error_message) }})"
                                            title="View Content">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if($log->status == 'delivered')
                                            <span
                                                class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-dash-success/20 text-dash-success">
                                                {{ ucfirst($log->status) }}
                                            </span>
                                        @elseif($log->status == 'error')
                                            <span
                                                class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-dash-danger/20 text-dash-danger">
                                                {{ ucfirst($log->status) }}
                                            </span>
                                        @elseif($log->status == 'processing' || $log->status == 'pending')
                                            <span
                                                class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-dash-warning/20 text-dash-warning">
                                                {{ ucfirst($log->status) }}
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-center">
                                        <button type="button" class=""
                                            onclick="openRenderedModal({{ json_encode($log->rendered_content) }})"
                                            title="View Content">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-4 whitespace-nowrap text-sm text-center">No logs
                                        found
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>
@endsection