Nexus-InglineSystems/resources/views/livewire/admin/clients/detail-client.blade.php

<div x-data="{ showClientDetails: false }" x-cloak 
    @keydown.escape.window="showClientDetails = false"
    x-on:client-detail.window="showClientDetails = true"
    class="relative z-50"
    wire:ignore.self
>

    <div x-show="showClientDetails" 
         x-transition:enter="transform transition ease-in-out duration-300 sm:duration-500" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" 
         x-transition:leave="transform transition ease-in-out duration-300 sm:duration-500" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
         class="fixed inset-y-0 right-0 flex max-w-full pl-10" 
         @click.away="showClientDetails = false"
    >
        
        <div class="w-screen max-w-4xl"> 

            <div class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">

            <div class="bg-gray px-4 py-6 sm:px-6">
                    <div class="flex items-center justify-between">
                        <h2 class="text-lg font-semibold leading-6 text-black" id="slide-over-title">
                        Detalhes do cliente
                        </h2>
                        <button type="button" @click="showClientDetails = false"
                            class="rounded-md text-blue-400 hover:text-white cursor-pointer focus:outline-none focus:ring-2 focus:ring-white">
                            <span class="sr-only">Fechar painel</span>
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>

                @if($client)
                <div class="form-wrapper-modal" wire:key="content-{{ $client->id }}">
                    <div class="form-grid-container">

                        <div class="form-main-panel-modal space-y-8"> <div class="form-group">
                                <h2 class="form-section-title">Informações Principais</h2>
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                                    <div>
                                        <label class="form-label">Nome Fantasia</label>
                                        <input type="text" value="{{ $client->name }}" class="form-input bg-gray-50" placeholder="Eletrônicos Mota" readonly>
                                    </div>
                                    <div>
                                        <label class="form-label">Razão Social</label>
                                        <input type="text" value="{{ $client->legal_name }}" class="form-input bg-gray-50" placeholder="Mota Germano Eletrônicos LTDA" readonly>
                                    </div>
                                    <div>
                                        <label class="form-label">CNPJ</label>
                                        <input type="text" value="{{ $client->cnpj }}" class="form-input bg-gray-50"  placeholder="54.505.316/0001-64" readonly>
                                    </div>
                                    <div>
                                        <label class="form-label">Logo</label>
                                        <div class="mt-1 flex items-center">
                                            @if($client->profile_image_path)
                                                <div class="h-10 w-10 rounded overflow-hidden border border-gray-200">
                                                    <img src="{{ asset('storage/' . $client->profile_image_path) }}" alt="Logo" class="h-full w-full object-cover">
                                                </div>
                                                <a href="{{ asset('storage/' . $client->profile_image_path) }}" target="_blank" class="ml-3 text-sm text-blue-600 hover:underline">Abrir imagem</a>
                                            @else
                                                <span class="text-sm text-gray-400 italic p-2 border border-dashed border-gray-300 rounded">Sem logo</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="form-divider">

                            <div class="form-group">
                                <h2 class="form-section-title">Detalhes do Servidor PBX</h2>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                                    <div>
                                        <label class="form-label">Hospedagem PBX</label>
                                        <input type="text" value="{{ $client->pbx_hosting }}" placeholder="Ex: Vultr, Local, AWS" class="form-input bg-gray-50" readonly>
                                    </div>
                                    <div>
                                        <label class="form-label">Data de Ativação</label>
                                        <input type="text" value="{{ $client->activation_date ? $client->activation_date->format('d/m/Y') : '-' }}" class="form-input bg-gray-50" readonly>
                                    </div>
                                    <div>
                                        <label class="form-label">Operadora</label>
                                        <input type="text" value="{{ $client->carrier }}" placeholder="ALGAR" class="form-input bg-gray-50" readonly>
                                    </div>
                                    <div>
                                        <label class="form-label">Tipo de Acesso</label>
                                        <input type="text" value="{{ $client->access_type }}" placeholder="Ex: SSH, AnyDesk, VPN" class="form-input bg-gray-50" readonly>
                                    </div>
                                    
                                    <div>
                                        <label class="form-label">Número de saída chave</label>
                                        <input type="text" value="{{ $client->ddr_out }}" placeholder="(71) 3034-8350" class="form-input bg-gray-50 font-mono text-sm" readonly>
                                    </div>
                                    <div>
                                        <label class="form-label">Número de entrada chave</label>
                                        <input type="text" value="{{ $client->ddr_key }}" placeholder="(71) 3034-8350" class="form-input bg-gray-50 font-mono text-sm" readonly>
                                    </div>

                                    <div>
                                        <label class="form-label">IP do Servidor</label>
                                        <input type="text" value="{{ $client->server_ip }}" placeholder="10.0.0.1" class="form-input bg-gray-50 font-mono cursor-text select-all" readonly>
                                    </div>
                                    <div x-data="{ show: false }">
                                        <label class="form-label">Senha (root)</label>
                                        <div class="relative">
                                            <input placeholder="************" :type="show ? 'text' : 'password'" value="{{ $client->root_password }}" class="form-input bg-gray-50 font-mono pr-20" readonly>
                                            <button type="button" @click="show = !show" class="absolute inset-y-0 right-0 px-3 flex items-center text-xs font-bold uppercase text-blue-600 hover:text-blue-800 cursor-pointer">
                                                <span x-text="show ? 'Ocultar' : 'Mostrar'"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="form-divider">

                            <div class="form-group">
                                <h2 class="form-section-title">Observações e Credenciais Internas</h2>
                                <div class="mt-4">
                                    <textarea rows="5" class="form-input bg-gray-50 resize-none" placeholder="VPN: Fortclient, SENHA: *******" readonly>{{ $client->observation }}</textarea>
                                </div>
                            </div>

                            <hr class="form-divider">

                            <div class="form-group">
                                <h2 class="form-section-title">WhatsApp</h2>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                                    <div>
                                        <label class="form-label">Número do WhatsApp</label>
                                        <input type="text" placeholder="(71) 3034-8350" value="{{ $client->whatsapp_number }}" class="form-input bg-gray-50 font-mono" readonly>
                                    </div>
                                    <div>
                                        <label class="form-label">Data Ativação WhatsApp</label>
                                        <input type="text" value="{{ $client->whatsapp_activation_date ? $client->whatsapp_activation_date->format('d/m/Y') : '-' }}" class="form-input bg-gray-50" readonly>
                                    </div>
                                </div>
                            </div>

                        </div> <div class="form-sidebar-column">
                            <div class="form-sticky-sidebar-modal">
                                <div class="form-section-card">
                                    <h2 class="form-section-title mb-4">Módulos & Recursos</h2>
                                    
                                    <div class="form-checkbox-group">
                                        <label class="form-checkbox-item opacity-80">
                                            <input type="checkbox" disabled {{ $client->has_call_center ? 'checked' : '' }} class="form-checkbox">
                                            <span>Possui Call Center?</span>
                                        </label>
                                        <label class="form-checkbox-item opacity-80">
                                            <input type="checkbox" disabled {{ $client->has_voice_gateway ? 'checked' : '' }} class="form-checkbox">
                                            <span>Possui Gateway de Voz?</span>
                                        </label>
                                        <label class="form-checkbox-item opacity-80">
                                            <input type="checkbox" disabled {{ $client->has_fop2 ? 'checked' : '' }} class="form-checkbox">
                                            <span>Possui FOP2?</span>
                                        </label>
                                    </div>

                                    <div class="mt-4">
                                        <label class="form-label">Módulos Adicionais (JSON)</label>
                                        <textarea rows="4" placeholder="Ex: {&quot;bi&quot;: true}" class="form-input bg-gray-50 text-xs font-mono" readonly>{{ json_encode($client->modules, JSON_PRETTY_PRINT) }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                @else
                    <div class="flex-1 flex items-center justify-center h-full" wire:key="loading-state">
                        <div class="text-gray-500 flex flex-col items-center">
                            <svg class="animate-spin h-8 w-8 text-blue-600 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                            <span>Carregando...</span>
                        </div>
                    </div>
                @endif

                <div class="flex-shrink-0 border-t border-gray-200 px-4 py-4 sm:px-6">
                    <div class="flex justify-end">
                        <button type="button" @click="showClientDetails = false" class="form-button-secondary">
                            Fechar
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>