@if(auth()->check())
    @php
        // Obter configurações do WhatsApp
        $whatsappSettings = \App\Models\WhatsappSettings::getCurrent();
        
        // Verificar se está disponível (online e dentro do horário, se configurado)
        $isAvailable = $whatsappSettings->isAvailable();
        
        // Número do WhatsApp (prioridade: banco de dados > .env > padrão)
        $whatsappNumber = $whatsappSettings->phone_number ?? env('WHATSAPP_NUMBER', '5511999999999');
        
        // Mensagem pré-definida para WhatsApp
        $whatsappMessage = $whatsappSettings->message ?? 'Olá! Preciso de ajuda com o sistema RH Módulos.';
        $whatsappMessageEncoded = urlencode($whatsappMessage);
        
        // Link do WhatsApp (funciona em desktop e mobile)
        $whatsappUrl = "https://wa.me/{$whatsappNumber}?text={$whatsappMessageEncoded}";
        
        // Cores baseadas na disponibilidade
        // Verde = Disponível (online e dentro do horário)
        // Cinza = Indisponível (offline ou fora do horário)
        $bgColor = $isAvailable ? 'btn-whatsapp-green' : 'bg-gray-500';
        $hoverBgColor = $isAvailable ? '' : '';
        $borderColor = $isAvailable ? 'btn-whatsapp-green' : 'border-gray-700';
        $hoverBorderColor = $isAvailable ? '' : '';
        $cursorClass = $isAvailable ? 'cursor-pointer' : 'cursor-not-allowed';
        $opacityClass = $isAvailable ? '' : 'opacity-60';
        
        // Mensagem do tooltip
        if ($isAvailable) {
            $tooltipMessage = 'WhatsApp Online - Clique para conversar';
            $tooltipIcon = '✓';
            $tooltipBg = 'bg-green-600';
        } else {
            if (!$whatsappSettings->is_online) {
                $tooltipMessage = 'WhatsApp está offline no momento.';
                $tooltipIcon = '✕';
            } elseif ($whatsappSettings->use_time_schedule && !$whatsappSettings->isWithinBusinessHours()) {
                $startTime = $whatsappSettings->formatted_start_time;
                $endTime = $whatsappSettings->formatted_end_time;
                $tooltipMessage = "WhatsApp disponível das {$startTime}h às {$endTime}h.";
                $tooltipIcon = '⏰';
            } else {
                $tooltipMessage = 'WhatsApp indisponível no momento.';
                $tooltipIcon = '✕';
            }
            $tooltipBg = 'bg-gray-600';
        }
    @endphp
    
    <style>
        .whatsapp-tooltip {
            position: absolute;
            bottom: calc(100% + 10px);
            right: 0;
            background-color: #ffffff;
            color: #000000;
            padding: 12px 16px;
            border-radius: 12px;
            font-size: 13px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transform: translateY(5px);
            transition: all 0.3s ease;
            pointer-events: none;
            z-index: 1000;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            border: 1px solid #e5e7eb;
            font-weight: 500;
        }
        
        .whatsapp-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            right: 20px;
            border: 8px solid transparent;
            border-top-color: #ffffff;
            filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
        }
        
        .whatsapp-tooltip.online {
            background-color: #ffffff;
            color: #000000;
            border-color: #16a34a;
        }
        
        .whatsapp-tooltip.online::after {
            border-top-color: #ffffff;
        }
        
        .whatsapp-tooltip.online .tooltip-icon {
            color: #16a34a;
        }
        
        .whatsapp-tooltip .tooltip-icon {
            color: #dc2626;
            margin-right: 6px;
        }
        
        .whatsapp-button-wrapper:hover .whatsapp-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .whatsapp-button-wrapper {
            position: fixed;
            bottom: 5.5rem;
            right: 1rem;
            z-index: 999;
        }

        .btn-whatsapp-green {
            background-color: #25D366 !important;
            border-color: #128C7E !important;
        }

        .btn-whatsapp-green:hover {
            background-color: #128C7E !important;
        }

        .btn-ticket-orange {
            background-color: #ff9800 !important;
            border-color: #e65100 !important;
        }

        .btn-ticket-orange:hover {
            background-color: #ef6c00 !important;
        }
    </style>
    
    {{-- Botão WhatsApp --}}
    @if(!auth()->user()->is_admin)
    <div class="whatsapp-button-wrapper">
        @if($isAvailable)
            <a href="{{ $whatsappUrl }}" target="_blank" rel="noopener noreferrer" class="block">
                <button id="buttonWhatsApp" class="{{ $bgColor }} {{ $hoverBgColor }} text-white font-bold p-2 rounded-full h-12 w-12 flex items-center justify-center border-2 {{ $borderColor }} {{ $hoverBorderColor }} shadow-lg transition-all {{ $cursorClass }}">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                    </svg>
                </button>
                <div class="whatsapp-tooltip online">
                    <span class="tooltip-icon font-semibold">{{ $tooltipIcon }}</span>{{ $tooltipMessage }}
                </div>
            </a>
        @else
            <button id="buttonWhatsApp" 
                    class="{{ $bgColor }} text-white font-bold p-2 rounded-full h-12 w-12 flex items-center justify-center border-2 {{ $borderColor }} shadow-lg transition-all {{ $cursorClass }} {{ $opacityClass }}" 
                    onclick="return false;" 
                    disabled>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                </svg>
                <div class="whatsapp-tooltip">
                    <span class="tooltip-icon font-semibold">{{ $tooltipIcon }}</span>{{ $tooltipMessage }}
                </div>
            </button>
        @endif
    </div>
    @endif
    
    {{-- Botão Mensagem (Chat) --}}
    <a href="/tickets" >
        <button id="buttonMessage" style="z-index: 999; display: none" class="absolute btn-ticket-orange text-white font-bold p-2 rounded-full h-12 w-12 flex items-center justify-center border-2 shadow-lg transition-all fixed-bottom-right">
            <div id="badgeMessage" style="font-size: 10px; padding: 2px 3.5px 2px 3.5px; position: absolute; margin-top: -30px; margin-right: -30px; min-width: 20px; display: none" class="rounded-full flex items-center justify-center bg-orange-600">0</div>
            <x-vaadin-chat />
        </button>
    </a>   
@endif