<x-app-layout>
<x-module-hero title="SMS History" description="View sent and scheduled SMS messages" icon="fa-comment-sms">
    <x-slot name="tabs">
        @can('view sms')
        <a href="{{ route('sms.index') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('sms.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-tachometer-alt text-sm"></i> Dashboard
        </a>
        @endcan
        @can('create sms')
        <a href="{{ route('sms.compose') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('sms.compose') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-pen text-sm"></i> Compose
        </a>
        @endcan
        @can('view sms')
        <a href="{{ route('sms.history') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('sms.history') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-history text-sm"></i> History
        </a>
        @endcan
        @can('manage sms templates')
        <a href="{{ route('sms.templates') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('sms.templates') || request()->routeIs('sms.*template*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-file-lines text-sm"></i> Templates
        </a>
        @endcan
    </x-slot>
</x-module-hero>

<div class="w-full">
    {{-- Search/Filter bar --}}
    <div class="p-4 bg-white border-b">
        <form method="GET" class="flex flex-wrap gap-3 items-end">
            <div class="flex-1 min-w-[200px]">
                <label class="block text-xs font-medium text-gray-600 mb-1">Search</label>
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Search messages..."
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">Status</label>
                <select name="status" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    <option value="">All Statuses</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="sent" {{ request('status') == 'sent' ? 'selected' : '' }}>Sent</option>
                    <option value="failed" {{ request('status') == 'failed' ? 'selected' : '' }}>Failed</option>
                    <option value="scheduled" {{ request('status') == 'scheduled' ? 'selected' : '' }}>Scheduled</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">From</label>
                <input type="date" name="date_from" value="{{ request('date_from') }}"
                    class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">To</label>
                <input type="date" name="date_to" value="{{ request('date_to') }}"
                    class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
            </div>
            <div class="flex gap-2">
                <button type="submit" class="px-4 py-2 bg-[#1a4731] text-white text-sm rounded-lg hover:bg-[#276749] transition">
                    <i class="fas fa-search mr-1"></i> Filter
                </button>
                <a href="{{ route('sms.history') }}" class="px-4 py-2 border border-gray-300 text-gray-600 text-sm rounded-lg hover:bg-gray-50 transition">
                    <i class="fas fa-times mr-1"></i> Clear
                </a>
            </div>
        </form>
    </div>

    @if(session('success'))
        <div class="mx-4 mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif

    {{-- Table --}}
    <div class="overflow-x-auto">
        <table class="w-full table-zebra">
            <thead>
                <tr>
                    <th class="px-4 py-3 text-left bg-blue-700 text-white text-xs font-semibold uppercase tracking-wider">Recipients</th>
                    <th class="px-4 py-3 text-left bg-purple-700 text-white text-xs font-semibold uppercase tracking-wider">Message</th>
                    <th class="px-4 py-3 text-left bg-green-700 text-white text-xs font-semibold uppercase tracking-wider">Status</th>
                    <th class="px-4 py-3 text-left bg-orange-700 text-white text-xs font-semibold uppercase tracking-wider">Sent At</th>
                    <th class="px-4 py-3 text-left bg-teal-700 text-white text-xs font-semibold uppercase tracking-wider">Sender</th>
                    <th class="px-4 py-3 text-center bg-red-700 text-white text-xs font-semibold uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($messages as $message)
                    <tr>
                        <td class="px-4 py-3 text-sm text-gray-700">
                            {{ count($message->recipients ?? []) }} recipient(s)
                            @if($message->target_role)
                                <span class="ml-1 text-xs text-gray-500">({{ $message->target_role }})</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            <div class="text-sm text-gray-800 max-w-xs truncate">{{ Str::limit($message->message, 60) }}</div>
                        </td>
                        <td class="px-4 py-3">
                            @php
                                $statusColors = [
                                    'sent' => 'bg-green-100 text-green-700',
                                    'failed' => 'bg-red-100 text-red-700',
                                    'pending' => 'bg-yellow-100 text-yellow-700',
                                    'scheduled' => 'bg-blue-100 text-blue-700',
                                    'sending' => 'bg-orange-100 text-orange-700',
                                ];
                                $statusClass = $statusColors[$message->status] ?? 'bg-gray-100 text-gray-700';
                            @endphp
                            <span class="px-2 py-1 text-xs rounded-full font-semibold {{ $statusClass }}">
                                {{ ucfirst($message->status) }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-600">
                            {{ $message->sent_at ? $message->sent_at->diffForHumans() : ($message->scheduled_at ? 'Scheduled: ' . $message->scheduled_at->format('M d, H:i') : 'Not sent') }}
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-600">
                            {{ $message->sender->name ?? 'System' }}
                        </td>
                        <td class="px-4 py-3 text-center">
                            <div class="flex items-center justify-center gap-2">
                                <a href="{{ route('sms.show', $message) }}"
                                   class="btn-action-view inline-flex items-center px-2 py-1 text-xs rounded text-white">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @can('delete sms')
                                    <form action="{{ route('sms.destroy', $message) }}" method="POST" class="inline">
                                        @csrf @method('DELETE')
                                        <button type="submit"
                                            class="btn-action-delete inline-flex items-center px-2 py-1 text-xs rounded text-white"
                                            onclick="return confirm('Delete this SMS?')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                @endcan
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-12 text-center text-gray-500">
                            <i class="fas fa-inbox text-4xl mb-4 opacity-50 block"></i>
                            <p>No messages found.</p>
                            @can('create sms')
                                <a href="{{ route('sms.compose') }}" class="mt-3 inline-block px-4 py-2 bg-[#1a4731] text-white text-sm rounded-lg hover:bg-[#276749] transition">
                                    <i class="fas fa-pen mr-1"></i> Compose SMS
                                </a>
                            @endcan
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    @if($messages->hasPages())
        <div class="px-4 py-3 border-t">{{ $messages->links() }}</div>
    @endif
</div>
</x-app-layout>
