@php
$cliente = Auth::guard('cliente')->user();
$modo_exibicao = session('modo_exibicao');
$tdnn = $modo_exibicao !== 'modo-escuro' ? 'day' : '';
$moon = $modo_exibicao !== 'modo-escuro' ? 'sun' : '';
@endphp
<header style="position: fixed; top: 0; z-index: 100; width: 100%;">
    <div class="row" style="padding-left: 100px; margin-right: 0;">
      <div class="beneficios-info col-md-6">
        <a href="{{ route('cliente.dashboard') }}" style="cursor: pointer; text-decoration: none;">
          <img src="{{ asset('assets/img/logo-retangular.png') }}" alt="Logo Retangular" style="width: 180px; position: relative; top: 1px;">
        </a>
        <div class="separator">|</div>
        <div class="beneficios-subtitle">
          Área do Cliente
        </div>
      </div>
      <div class="col-md-6 df-ac-jc" style="gap: 20px; display: flex; align-items: center; justify-content: flex-end;">
        <span class="separator">|</span>
        <div class="tdnn {{ $tdnn }}" title="Alternar modo claro/escuro" role="button" tabindex="0" aria-label="Alternar tema claro ou escuro">
          <div class="moon {{ $moon }}"></div>
        </div>
        <div class="perfil-container">
          <div class="perfil-select">
            @php
              $nome_completo = $cliente->nome_completo ?? '';
              $partesNome = explode(' ', $nome_completo);
              $primeiroNome = e($partesNome[0] . (isset($partesNome[1]) ? ' ' . $partesNome[1] : ''));
            @endphp
            {{ $primeiroNome }}
            <span class="icon-container" aria-hidden="true" style="position: relative; display: inline-block;">
              <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="var(--color-icone)">
                <path d="M5 7l5 5 5-5z"></path>
              </svg>
            </span>
          </div>
          <div id="meu-dropdown-menu" class="dropdown-menu">
            <div id="user-profile">
              <div class="user-initial">
                @php
                  $iniciais = strtoupper(substr(trim($nome_completo), 0, 1));
                @endphp
                {{ $iniciais }}
              </div>
              <div class="user-info">
                <p class="full-name">{{ $nome_completo }}</p>
                <p class="email">{{ $cliente->email }}</p>
              </div>
            </div>
            <a href="{{ route('cliente.perfil.edit') }}" class="df-ac-jsb w100">
              <div class="df-ac-jc">
                <svg xmlns="http://www.w3.org/2000/svg" fill="var(--color-icone)" width="18px" height="18px" viewBox="0 0 128 128" style="margin-right: 5px;">
                  <path d="M8.766,119.203c-0.498-0.504-0.775-1.199-0.768-1.906c0.023-1.344,0.393-13.309,6.707-19.625c2.913-2.914,9.013-6.07,17.986-10.561c9.576-4.785,14.886-7.639,17.333-9.953l5.396-5.102l-4.688-5.76c-7.384-9.072-11.621-19.09-11.621-27.482c0-6.473,0-13.809,3.063-19.877C45.84,11.68,53.181,8,64,8c10.816,0,18.161,3.68,21.824,10.936c3.063,6.07,3.063,13.406,3.063,19.879c0,8.391-4.237,18.408-11.624,27.482l-4.688,5.762l5.4,5.104c1.461,1.381,3.979,2.969,7.798,5.039l5.911-5.91c-3.615-1.898-7.021-3.814-8.214-4.943c8.491-10.434,13.416-22.217,13.416-32.533c0-7,0-15.713-3.918-23.482C89.435,8.338,81.544,0,64,0C46.454,0,38.563,8.338,35.033,15.332c-3.923,7.77-3.923,16.48-3.923,23.482c0,10.318,4.925,22.1,13.417,32.533c-2.028,1.918-10.389,6.098-15.413,8.607c-9.965,4.984-16.287,8.279-20.066,12.061c-8.371,8.371-9.004,22.422-9.047,25.156c-0.043,2.852,1.059,5.609,3.065,7.648c2.004,2.031,4.741,3.18,7.599,3.18h45.304v-8H10.665C9.958,120,9.263,119.711,8.766,119.203z M121.224,94.758l-5.747,5.746c3.368,5.316,4.458,12.703,4.521,16.789c0.012,0.711-0.266,1.406-0.762,1.91c-0.508,0.516-1.184,0.797-1.903,0.797H95.977l-8.001,8h29.356c2.86,0,5.596-1.148,7.6-3.18c2.004-2.039,3.11-4.797,3.067-7.652C127.96,114.715,127.393,103.16,121.224,94.758z M125.639,83.313c3.126-3.125,3.126-8.191,0-11.313l-5.657-5.656c-1.563-1.563-3.61-2.344-5.657-2.344c-2.048,0-4.095,0.781-5.657,2.344l-34.353,34.344c-1.561,1.563-6.341,7.605-6.343,9.652L63.971,128l17.659-4c0,0,8.096-4.781,9.658-6.344L125.639,83.313z M84.533,117.527l-10.365-10.363c1.063-1.457,2.246-2.922,2.975-3.648l25.867-25.859l11.314,11.313L88.468,114.82C88.015,115.25,86.447,116.309,84.533,117.527z"/>
                </svg>
                <span>Meu Perfil</span>
              </div>
              <span class="seta1" style="margin-right: 0;height: 18px;display: flex;align-items: center;">›</span>
            </a>
            <hr>
            <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="df-ac-jsb w100">
              <div class="df-ac-jc">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="var(--color-icone)" class="bi bi-door-open" viewBox="0 0 16 16" style="margin-right: 4px;">
                  <path d="M8.5 10c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z"/>
                  <path d="M10.828.122A.5.5 0 0 1 11 .5V1h.5A1.5 1.5 0 0 1 13 2.5V15h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V1.5a.5.5 0 0 1 .43-.495l7-1a.5.5 0 0 1 .398.117zM11.5 2H11v13h1V2.5a.5.5 0 0 0-.5-.5zM4 1.934V15h6V1.077l-6 .857z"/>
                </svg>
                <span>Sair</span>
              </div>
              <span class="seta1" style="margin-right: 0;height: 18px;display: flex;align-items: center;">›</span>
            </a>
            <form id="logout-form" action="{{ route('cliente.logout') }}" method="POST" style="display: none;">
              @csrf
            </form>
          </div>
        </div>
      </div>
    </div>
  </header>