{{-- SMS Item - Card Design --}}
@php
    $isSent = (bool) $notification->sent_at;
@endphp
<div class="activity-card border-success" wire:key="sms-{{ $notification->id }}" x-data="{ expanded: false }">
    {{-- Header --}}
    <div class="card-header">
        {{-- Icon --}}
        <div class="card-icon">
            <span class="icon-circle bg-success-dim">
                <x-ui.nicon name="chat" class="text-success"/>
            </span>
        </div>
        
        {{-- Content --}}
        <div class="card-content">
            {{-- Badges --}}
            <div class="card-badges">
                <span class="activity-badge bg-success-dim text-success">
                    <x-ui.nicon name="chat" class="me-1"/>
                    {{ __('SMS') }}
                </span>
                @if($notification->notificationAutomation)
                    <span class="activity-badge bg-warning-dim text-warning">
                        <x-ui.nicon name="repeat" class="me-1"/>
                        {{ __('Automation') }}
                    </span>
                @endif
                @if(! $isSent)
                    <span class="activity-badge bg-warning-dim text-warning">
                        <x-ui.nicon name="clock" class="me-1"/>
                        {{ __('Scheduled') }}
                    </span>
                @endif
            </div>

            {{-- Title --}}
            @if($notification->title)
                <div class="card-title">{{ $notification->title }}</div>
            @endif

            {{-- Meta Info --}}
            <div class="card-meta">
                <span class="meta-item">
                    <x-ui.nicon name="user"/>
                    <span>{{ __('To') }}:</span>
                    <strong>{{ $notification->receiver?->name ?? $notification->receiver?->fullname ?? __('Unknown') }}</strong>
                    @if($notification->receiver?->phone_mobile)
                        <span class="text-muted">({{ $notification->receiver->phone_mobile }})</span>
                    @endif
                </span>
                @if($notification->user)
                    <span class="meta-item">
                        <x-ui.nicon name="user-check"/>
                        <span>{{ __('By') }}:</span>
                        <strong>{{ $notification->user->fullname }}</strong>
                    </span>
                @endif
            </div>
        </div>

        {{-- Timestamp --}}
        <div class="card-time">
            <span class="time-date">{{ ($notification->sent_at ?? $notification->created_at)->format('d/m/y') }}</span>
            <span class="time-hour">{{ ($notification->sent_at ?? $notification->created_at)->format('H:i') }}</span>
            @if($notification->scheduled_at && !$isSent)
                <span class="time-date text-warning mt-1">
                    <x-ui.nicon name="calendar" class="me-1"/>
                    {{ $notification->scheduled_at->format('d/m H:i') }}
                </span>
            @endif
        </div>
    </div>

    {{-- Actions --}}
    <div class="card-actions">
        <x-ui.button 
            color="outline-light"
            size="xs"
            icon="eye"
            x-on:click="expanded = !expanded"
        >
            <span>{{ __('Show preview') }}</span>
        </x-ui.button>
        <x-ui.button
            wire:click="$emit('showModal', 'modals.notifications.show-sent-notification-modal', {{ $notification->id }})"
            color="success"
            size="xs"
            icon="external"
            :label="__('View full')"
        />
    </div>

    {{-- Preview Content (Collapsible) --}}
    <div x-show="expanded" x-collapse>
        <div class="card-preview preview-sms">
            {{ Str::limit($notification->content, 600) }}
        </div>
    </div>
</div>