<x-app-layout>
<x-module-hero title="SMS" description="Send and manage 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>
    @can('create sms')
    <x-slot name="actions">
        <a href="{{ route('sms.compose') }}"
           class="inline-flex items-center gap-2 px-4 py-2 bg-[#1e293b] text-white text-sm font-semibold rounded-lg hover:bg-[#334155] transition">
            <i class="fas fa-pen"></i> Compose SMS
        </a>
    </x-slot>
    @endcan
</x-module-hero>

<div class="w-full">
    {{-- Statistics Cards --}}
    @if(isset($statistics))
    <div class="p-6 grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
            <p class="text-2xl font-bold text-gray-800">{{ $statistics['total'] ?? 0 }}</p>
            <p class="text-xs text-gray-500 mt-1">Total Sent</p>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
            <p class="text-2xl font-bold text-green-700">{{ $statistics['sent'] ?? 0 }}</p>
            <p class="text-xs text-gray-500 mt-1">Delivered</p>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
            <p class="text-2xl font-bold text-yellow-600">{{ $statistics['pending'] ?? 0 }}</p>
            <p class="text-xs text-gray-500 mt-1">Pending</p>
        </div>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
            <p class="text-2xl font-bold text-red-600">{{ $statistics['failed'] ?? 0 }}</p>
            <p class="text-xs text-gray-500 mt-1">Failed</p>
        </div>
    </div>
    @endif

    {{-- Recent Messages --}}
    <div class="px-6 pb-6">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex items-center justify-between">
                <h3 class="text-base font-semibold text-gray-800 flex items-center gap-2">
                    <i class="fas fa-clock-rotate-left text-blue-600"></i> Recent Messages
                </h3>
                @can('view sms')
                <a href="{{ route('sms.history') }}" class="text-sm text-blue-600 hover:underline">View all</a>
                @endcan
            </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

            <div class="overflow-x-auto">
                <table class="w-full">
                    <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-center bg-red-700 text-white text-xs font-semibold uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse(isset($messages) ? $messages : [] as $message)
                            <tr class="hover:bg-gray-50 transition">
                                <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-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="5" 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>

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

    {{-- Quick Templates --}}
    @if(isset($templates) && $templates->count() > 0)
    <div class="px-6 pb-6">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex items-center justify-between">
                <h3 class="text-base font-semibold text-gray-800 flex items-center gap-2">
                    <i class="fas fa-file-lines text-purple-600"></i> Quick Templates
                </h3>
                @can('manage sms templates')
                <a href="{{ route('sms.templates') }}" class="text-sm text-blue-600 hover:underline">Manage templates</a>
                @endcan
            </div>
            <div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-3">
                @foreach($templates->take(6) as $template)
                    <div class="border border-gray-200 rounded-lg p-3 hover:border-green-400 transition">
                        <p class="text-sm font-medium text-gray-800 truncate">{{ $template->name }}</p>
                        <p class="text-xs text-gray-500 mt-1 truncate">{{ Str::limit($template->content, 60) }}</p>
                        @can('create sms')
                        <a href="{{ route('sms.compose') }}?template={{ $template->id }}"
                           class="mt-2 inline-flex items-center gap-1 text-xs text-green-700 hover:text-green-900 font-medium">
                            <i class="fas fa-paper-plane"></i> Use template
                        </a>
                        @endcan
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif
</div>
</x-app-layout>
