@include('layouts.front.carts.cart-modal')

<header>
  <section class="d-none d-md-block">
    
    <div class="container-fluid border-bottom">
      
      <div class="container">
        <div class="row py-2">
          <div class="col-lg text-center">
            <a href="{{ route('contato') }}" class="font-weight-bolder font-nunito fosco-text">
              <h6 class="mb-0">
                Solicite um orçamento <i class="fas fa-comments ml-1"></i>
              </h6>
            </a>
          </div>
          <div class="col-lg text-center">
            <h6 class="font-weight-normal font-nunito fosco-text mb-0">
              Monte seu pedido no site, retire na loja
            </h6>
          </div>
          <div class="col-lg text-center">
            <h6 class="font-weight-normal font-nunito fosco-text mb-0">
              Parcele em até {!! config('cart.parc_sem_juros')!!}x sem juros
            </h6>
          </div>
        </div>
      </div>
      
    </div>
    
    <div class="container-fluid">
      <div class="container">
        <div class="row">
          
          <div class="col-lg-3 my-auto">
            <div class="bg-image">
              <a href="{{ route('home') }}">
                <img src="{{ asset('storage/logos/logo_eletrobit.png') }}" alt="{{config('app.name')}}" class="img-fluid mx-auto">
              </a>
            </div>
          </div>
          
          <div class="col-lg my-auto">
            <form action="{{ route('search.product') }}" method="get" id="search">
              <div class="input-group border-radius-custom gray-200 py-2">
                <input class="form-control border-none transparent typeahead m-2" type="text" placeholder="Buscar produtos" name="search">
                <div class="input-group-append border-none">
                  <span class="p-3"><i class="fas fa-search"></i></span>
                </div>
              </div>
            </form>
          </div>
          
          <div class="col-lg-3 my-auto">
            <div class="row">
              
              <div class="col-lg my-auto">
                <div class="row">
                  <div class="col-lg-3">
                    <i class="fas fa-user-alt fa-2x mt-3"></i>
                  </div>
                  <div class="col-lg mt-2">
                    @php
                    if(auth()->check()){
                      $name = explode(' ', auth()->user()->name);
                      $firstName = reset($name);
                    } else {
                      $firstName = 'visitante';
                    }
                    @endphp                    
                    
                    <h6 class="font-weight-bold">Olá, {!! $firstName !!}!</h6>
                    
                    @if (auth()->check())
                    <a href="{{ route('accounts', ['tab' => 'profile']) }}">
                      <small class="font-weight-bolder fosco-text">
                        Minha conta <i class="fas fa-sign-out-alt"></i>
                      </small>
                    </a>
                    @else
                    <a href="{{route('autentica.completo')}}">
                      <small class="font-weight-bolder fosco-text">
                        Faça seu login <i class="fas fa-sign-in-alt"></i>
                      </small>
                    </a>
                    @endif
                    
                  </div>
                </div>
              </div>
              
              <div class="col-lg-4 my-auto">
                <a data-toggle="modal" data-target="#cart" class="btn btn-md box-primary pb-0">
                  <i class="fas fa-shopping-cart fa-2x"></i>
                  <span class="badge pdt bg-dark btn-rounded">{{ $cartCount }}</span>
                </a>
              </div>
              
            </div>
          </div>
          
        </div>
      </div>
      
    </div>
    
    @include(config('site.domain').'.layouts.front.menu-superior')
  </section>
  
  <section class="d-block d-md-none">
    @include(config('site.domain').'.layouts.front.header-mobile')
  </section>
  
</header>