<div>
    <button type="button" class="noti-icon position-relative btn btn-link text-white p-0 px-3" wire:click="toggle">
        <i class="mdi mdi-bell-outline"></i>

        @if($unreadCount > 0)
            <span class="position-absolute top-100 start-100 translate-middle badge rounded-pill bg-danger" style="width: 19px; height: 16px; font-size: 10px;">
                {{ $unreadCount > 9 ? '9+' : $unreadCount }}
            </span>
        @endif
    </button>

    @if($open)
        <div class="offcanvas offcanvas-end show" tabindex="-1" style="--bs-offcanvas-width: 420px;" role="dialog">
            <div class="offcanvas-header border-bottom">
                <h5 id="notificationPanelLabel">Notifications</h5>
                <div class="d-flex gap-2 align-items-center">
                    @if($unreadCount > 0)
                        <button type="button" class="btn btn-sm btn-light" wire:click="markAllRead">
                            Mark all read
                        </button>
                    @endif
                    <button type="button" class="btn-close text-dark" wire:click="toggle"></button>
                </div>
            </div>

            <div class="offcanvas-body p-0 bg-light">
                @forelse($notifications as $notification)
                    <div class="d-flex align-items-start p-3 border-bottom bg-white {{ is_null($notification->read_at) ? 'border-start border-primary border-3' : '' }}"
                         wire:key="notif-{{ $notification->id }}">
                        <div class="flex-grow-1">
                            @if(($notification->data['type'] ?? '') === 'voicemail')
                                @if(!empty($notification->data['client_id']))
                                    <a wire:navigate href="{{ route('clients.show', $notification->data['client_id']) }}" class="text-decoration-none text-reset">
                                @endif
                                <p class="mb-0 {{ is_null($notification->read_at) ? 'fw-semibold' : 'text-muted' }}">
                                    <i class="mdi mdi-phone-incoming me-1"></i>New Voicemail
                                </p>
                                <small class="d-block text-muted">
                                    {{ $notification->data['caller_name'] ?? 'Unknown caller' }}
                                    @if(!empty($notification->data['duration']))
                                        · {{ sprintf('%d:%02d', floor($notification->data['duration'] / 60), $notification->data['duration'] % 60) }}
                                    @endif
                                </small>
                                @if(!empty($notification->data['client_id']))
                                    </a>
                                @endif
                            @elseif(($notification->data['type'] ?? '') === 'inbound_client_email')
                                <a wire:navigate href="{{ route('clients.show', $notification->data['client_id']) }}" class="text-decoration-none text-reset">
                                    <p class="mb-0 {{ is_null($notification->read_at) ? 'fw-semibold' : 'text-muted' }}">
                                        <i class="mdi mdi-email-arrow-left-outline me-1"></i>{{ $notification->data['client_name'] ?? 'Client' }}
                                    </p>
                                    <small class="d-block text-muted text-truncate" style="max-width:300px">
                                        {{ $notification->data['message'] ?? 'New inbound email' }}
                                    </small>
                                </a>
                            @elseif(($notification->data['type'] ?? '') === 'initial_documents_signed')
                                @if(!empty($notification->data['client_id']))
                                    <a wire:navigate href="{{ route('clients.show', $notification->data['client_id']) }}" class="text-decoration-none text-reset">
                                @endif
                                <p class="mb-0 {{ is_null($notification->read_at) ? 'fw-semibold' : 'text-muted' }}">
                                    <i class="mdi mdi-file-sign me-1"></i>{{ $notification->data['title'] ?? 'Initial documents e-signed' }}
                                </p>
                                <small class="d-block text-muted text-truncate" style="max-width:300px">
                                    {{ $notification->data['message'] ?? '' }}
                                </small>
                                @if(!empty($notification->data['client_id']))
                                    </a>
                                @endif
                            @elseif(($notification->data['type'] ?? '') === 'client_proof_uploaded')
                                @if(!empty($notification->data['client_id']))
                                    <a wire:navigate href="{{ route('clients.show', $notification->data['client_id']) }}" class="text-decoration-none text-reset">
                                @endif
                                <p class="mb-0 {{ is_null($notification->read_at) ? 'fw-semibold' : 'text-muted' }}">
                                    <i class="mdi mdi-card-account-details-outline me-1"></i>{{ $notification->data['title'] ?? 'Proof document uploaded' }}
                                </p>
                                <small class="d-block text-muted text-truncate" style="max-width:300px">
                                    {{ $notification->data['message'] ?? '' }}
                                </small>
                                @if(!empty($notification->data['client_id']))
                                    </a>
                                @endif
                            @else
                                <p class="mb-1 {{ is_null($notification->read_at) ? 'fw-bold' : '' }}">
                                    {{ $notification->data['message'] ?? ($notification->data['title'] ?? 'Notification') }}
                                </p>
                            @endif
                            <small class="text-muted">{{ $notification->created_at->diffForHumans() }}</small>
                        </div>
                        @if(is_null($notification->read_at))
                            <button type="button"
                                    class="btn btn-sm btn-link text-muted p-0 ms-2 mt-1"
                                    wire:click="markRead('{{ $notification->id }}')"
                                    title="Mark as read">
                                <i class="mdi mdi-check"></i>
                            </button>
                        @endif
                    </div>
                @empty
                    <div class="p-5 text-center text-muted">
                        <i class="mdi mdi-bell-off-outline d-block mb-2" style="font-size: 32px;"></i>
                        No notifications
                    </div>
                @endforelse
            </div>
        </div>
    @endif
</div>
