<x-app-layout>
<x-module-hero title="SMS Message" description="View message information and delivery status" icon="fa-comment-sms">
    <x-slot name="backButton">
        <a href="{{ route('sms.index') }}" class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
            <i class="fas fa-arrow-left text-xs"></i> Back to SMS
        </a>
    </x-slot>
    <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') || request()->routeIs('sms.show') ? '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="p-6">
    @if(session('success'))
        <div class="mb-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="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Main Content --}}
        <div class="lg:col-span-2 space-y-6">
            {{-- Message Content --}}
            <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">
                    <h3 class="text-base font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-envelope text-blue-600"></i> Message Content
                    </h3>
                </div>
                <div class="p-6">
                    <div class="text-gray-700 whitespace-pre-wrap text-sm leading-relaxed">{{ $sms->message }}</div>
                    <div class="mt-4 pt-4 border-t border-gray-100 flex gap-4 text-xs text-gray-500">
                        <span><i class="fas fa-text-width mr-1"></i> {{ strlen($sms->message) }} characters</span>
                        <span><i class="fas fa-layer-group mr-1"></i> {{ ceil(strlen($sms->message) / 160) }} SMS segment(s)</span>
                    </div>
                </div>
            </div>

            {{-- Recipients List --}}
            <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">
                    <h3 class="text-base font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-users text-purple-600"></i>
                        Recipients ({{ count($sms->recipients ?? []) }})
                        @if($sms->target_role)
                            <span class="ml-2 px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full">Role: {{ $sms->target_role }}</span>
                        @endif
                    </h3>
                </div>
                <div class="divide-y divide-gray-100 max-h-64 overflow-y-auto">
                    @forelse(($sms->recipients ?? []) as $recipient)
                        <div class="px-6 py-3 flex justify-between items-center">
                            <span class="text-sm text-gray-700">{{ $recipient['phone'] ?? $recipient }}</span>
                            @if(isset($recipient['status']))
                                <span class="px-2 py-1 text-xs rounded-full {{ $recipient['status'] == 'delivered' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                                    {{ ucfirst($recipient['status']) }}
                                </span>
                            @endif
                        </div>
                    @empty
                        <div class="px-6 py-4 text-center text-gray-500 text-sm">No recipients found</div>
                    @endforelse
                </div>
            </div>

            {{-- Delivery Reports --}}
            @if($sms->delivery_reports && count($sms->delivery_reports) > 0)
            <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">
                    <h3 class="text-base font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-chart-bar text-teal-600"></i> Delivery Reports
                    </h3>
                </div>
                @php $stats = $sms->getDeliveryStats(); @endphp
                <div class="p-6 grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="text-center p-3 bg-green-50 rounded-lg">
                        <p class="text-2xl font-bold text-green-700">{{ $stats['delivered'] }}</p>
                        <p class="text-xs text-green-600">Delivered</p>
                    </div>
                    <div class="text-center p-3 bg-red-50 rounded-lg">
                        <p class="text-2xl font-bold text-red-700">{{ $stats['failed'] }}</p>
                        <p class="text-xs text-red-600">Failed</p>
                    </div>
                    <div class="text-center p-3 bg-yellow-50 rounded-lg">
                        <p class="text-2xl font-bold text-yellow-700">{{ $stats['pending'] }}</p>
                        <p class="text-xs text-yellow-600">Pending</p>
                    </div>
                    <div class="text-center p-3 bg-blue-50 rounded-lg">
                        <p class="text-2xl font-bold text-blue-700">{{ $stats['delivery_rate'] }}%</p>
                        <p class="text-xs text-blue-600">Delivery Rate</p>
                    </div>
                </div>
            </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <div class="space-y-6">
            {{-- Status Card --}}
            <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">
                    <h3 class="text-base font-semibold text-gray-800">Status</h3>
                </div>
                <div class="p-4 text-center">
                    @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[$sms->status] ?? 'bg-gray-100 text-gray-700';
                    @endphp
                    <span class="px-4 py-2 rounded-full text-lg font-semibold {{ $statusClass }}">
                        {{ ucfirst($sms->status) }}
                    </span>
                    @if($sms->error_message)
                        <p class="mt-3 text-xs text-red-600 bg-red-50 p-2 rounded">{{ $sms->error_message }}</p>
                    @endif
                </div>
            </div>

            {{-- Details Card --}}
            <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">
                    <h3 class="text-base font-semibold text-gray-800">Details</h3>
                </div>
                <div class="divide-y divide-gray-100">
                    <div class="px-4 py-3">
                        <span class="text-xs text-gray-500">Sender</span>
                        <p class="text-sm font-medium text-gray-800">{{ $sms->sender->name ?? 'System' }}</p>
                    </div>
                    @if($sms->sender_id_name)
                    <div class="px-4 py-3">
                        <span class="text-xs text-gray-500">Sender ID</span>
                        <p class="text-sm font-medium text-gray-800">{{ $sms->sender_id_name }}</p>
                    </div>
                    @endif
                    <div class="px-4 py-3">
                        <span class="text-xs text-gray-500">Created</span>
                        <p class="text-sm font-medium text-gray-800">{{ $sms->created_at->format('M d, Y H:i') }}</p>
                    </div>
                    @if($sms->sent_at)
                    <div class="px-4 py-3">
                        <span class="text-xs text-gray-500">Sent At</span>
                        <p class="text-sm font-medium text-gray-800">{{ $sms->sent_at->format('M d, Y H:i') }}</p>
                    </div>
                    @endif
                    @if($sms->scheduled_at)
                    <div class="px-4 py-3">
                        <span class="text-xs text-gray-500">Scheduled For</span>
                        <p class="text-sm font-medium text-gray-800">{{ $sms->scheduled_at->format('M d, Y H:i') }}</p>
                    </div>
                    @endif
                    @if($sms->cost > 0)
                    <div class="px-4 py-3">
                        <span class="text-xs text-gray-500">Cost</span>
                        <p class="text-sm font-medium text-gray-800">KES {{ number_format($sms->cost, 2) }}</p>
                    </div>
                    @endif
                    @if($sms->template)
                    <div class="px-4 py-3">
                        <span class="text-xs text-gray-500">Template Used</span>
                        <p class="text-sm font-medium text-gray-800">{{ $sms->template->name }}</p>
                    </div>
                    @endif
                </div>
            </div>

            {{-- Actions --}}
            @can('delete sms')
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                    <form action="{{ route('sms.destroy', $sms) }}" method="POST">
                        @csrf @method('DELETE')
                        <button type="submit"
                            class="w-full px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition flex items-center justify-center gap-2"
                            onclick="return confirm('Delete this SMS?')">
                            <i class="fas fa-trash"></i> Delete SMS
                        </button>
                    </form>
                </div>
            @endcan
        </div>
    </div>
</div>
</x-app-layout>
