@extends('layouts.app', ['title' => 'Perfil'])
@section('content')

<style>
.profile-modern {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.profile-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 40px;
    color: white;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.profile-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.3; }
}

.profile-header {
    position: relative;
    z-index: 1;
    text-align: center;
}

.profile-avatar-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.profile-avatar-wrapper img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    object-fit: cover;
}

.profile-name {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.profile-company {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 20px;
}

.profile-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-profile-edit {
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.btn-profile-edit:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
    color: white;
    transform: translateY(-2px);
}

.btn-upgrade {
    background: linear-gradient(135deg, #00E676 0%, #00C853 100%);
    border: none;
    color: white;
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,230,118,0.4);
    transition: all 0.3s ease;
}

.btn-upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,230,118,0.5);
    color: white;
}

.info-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    margin-top: -30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.info-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #667eea;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

.info-row {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid #f5f5f5;
    align-items: center;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    flex: 0 0 180px;
    font-weight: 600;
    color: #666;
    font-size: 14px;
}

.info-value {
    flex: 1;
    color: #333;
    font-size: 15px;
}

.plan-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.btn-boleto {
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    color: #333;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.btn-boleto:hover {
    background: white;
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
}

.btn-back {
    background: white;
    border: 2px solid #e0e0e0;
    color: #666;
    padding: 8px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-back:hover {
    border-color: #667eea;
    color: #667eea;
}
</style>

<div class="profile-modern">
    <div class="text-end mb-3">
        <a href="{{ route('usuarios.index') }}" class="btn-back">
            <i class="ri-arrow-left-line"></i> Voltar
        </a>
    </div>

    <div class="profile-card">
        <div class="profile-header">
            @isset($item)
                <div class="profile-avatar-wrapper">
                    @if($item->imagem != null)
                        <img src="{{ $item->img }}" alt="{{ $item->name }}">
                    @else
                        <img src="/imgs/no-image.png" alt="Avatar">
                    @endif
                </div>
            @endisset

            <h3 class="profile-name">{{ $item->name }}</h3>
            @if($item->empresa)
                <p class="profile-company">{{ $item->empresa->empresa->nome }}</p>
            @endif

            <div class="profile-actions">
                <a href="{{ route('usuarios.edit', $item->id) }}" class="btn-profile-edit">
                    <i class="ri-edit-line"></i> Editar Perfil
                </a>

                @if($item->empresa && $item->empresa->empresa->plano && $item->empresa->empresa->receber_com_boleto == 0)
                    <a href="{{ route('upgrade.index') }}" class="btn-upgrade">
                        <i class="ri-vip-crown-line"></i> Fazer Upgrade
                    </a>
                @endif
            </div>
        </div>
    </div>

    <div class="info-card">
        <div class="info-section-title">Informações da Conta</div>
        
        <div class="info-row">
            <div class="info-label">
                <i class="ri-user-line me-2"></i>Nome
            </div>
            <div class="info-value">{{ $item->name }}</div>
        </div>

        <div class="info-row">
            <div class="info-label">
                <i class="ri-mail-line me-2"></i>Email
            </div>
            <div class="info-value">{{ $item->email }}</div>
        </div>

        <div class="info-row">
            <div class="info-label">
                <i class="ri-calendar-line me-2"></i>Data do Cadastro
            </div>
            <div class="info-value">{{ __data_pt($item->created_at) }}</div>
        </div>

        <div class="info-row">
            <div class="info-label">
                <i class="ri-global-line me-2"></i>IP
            </div>
            <div class="info-value">{{ Auth::user()->acessos && Auth::user()->acessos->first() ? Auth::user()->acessos->first()->ip : '-'}}</div>
        </div>

        @if($item->empresa && $item->empresa->empresa->plano)
        <div class="info-row">
            <div class="info-label">
                <i class="ri-vip-crown-line me-2"></i>Plano
            </div>
            <div class="info-value">
                <span class="plan-badge">{{ $item->empresa->empresa->plano->plano->nome }}</span>
            </div>
        </div>

            @if($item->empresa->empresa->receber_com_boleto == 0)
            <div class="info-row">
                <div class="info-label">
                    <i class="ri-time-line me-2"></i>Data de Expiração
                </div>
                <div class="info-value">{{ __data_pt($item->empresa->empresa->plano->data_expiracao, 0) }}</div>
            </div>
            @endif
        @endif

        @if(__faturaBoleto())
            <div class="text-center">
                <a class="btn-boleto" target="_blank" href="{{ __faturaBoleto()->pdf_boleto }}">
                    <i class="ri-file-text-line"></i>
                    Ver Boleto
                </a>
            </div>
        @endif
    </div>
</div>
@endsection