@props(['content' => config('global.h_content')])
    
    @php $content = json_decode(json_encode($content, false)) @endphp

 <!--offcanvas menu start-->

<div class="offcanvas_menu position-fixed">

    <div class="tt-short-info d-none d-md-none d-lg-none d-xl-block">

        <button class="btn_bs offcanvas-close"><i class="fa-solid fa-xmark"></i></button>
    
        <a href="/" class="logo-wrapper d-inline-block mb-5"><img src="{{ asset($content->logo) }}" alt="logo"></a>
    
        <div class="offcanvas-content">
    
            @auth
        
                <div class="p-3" x-show="step == 1">
            
                    <p><b>Nome: </b>{{Auth::user()->name}}</p>
                
                    <p><b>E-mail: </b>{{Auth::user()->email}}</p>
                
                    <button type="button" class="btn w-full btn-neutral mb-3" onclick="location.href='/painel'">Minha FUNDABOM</button>
                
                    <form class="pb-3" action="{{route('logout')}}" method="post" id="logout">
                
                        @csrf
                
                        <a  href="javascript:void(0)" onclick="$('#logout').submit()">Sair</a>
                    
                    </form>
                
                </div>
            
            @endauth
        
            @guest
        
                @livewire('elements.login')
            
            @endguest
        
        </div>
        
        <div class="offcanvas-content">
        
            <h4 class="mb-4">Sobre a FUNDABOM</h4>
            
            {!! $content->oc_content->about !!}

            {{--<a href="{{ $content->oc_content->about_url }}" class="btn btn-primary mt-4">About Us</a>--}}
        
        </div>
        
        <div class="offcanvas-contact mt-5">
        
            <h5 class="mb-20">Contact Info</h5>
            
            <address>
                {{ $content->address }} <br>
                {{--<a href="{{ $content->phone->url }}"> {{ $content->phone->number }} </a> <br>--}}
                <a href="mailto:{{ $content->mailto }}">{{ $content->mailto }}</a>
            
            </address>
        
        </div>
        
        <div class="social-contact offcanvas_social mt-4">
        
            <a href="{{ $content->social->facebook }}" class="social-btn"><i class="fab fa-facebook-f"></i></a>
            
            <a href="{{ $content->social->instagram }}" class="social-btn"><i class="fab fa-instagram"></i></a>
            
            <a href="{{ $content->social->linkedin }}" class="social-btn"><i class="fab fa-linkedin-in"></i></a>
            
            {{--<a href="{{ $content->social->twitter }}" class="social-btn"><i class="fab fa-twitter"></i></a>--}}
            
            <a href="{{ $content->social->youtube }}" class="social-btn"><i class="fab fa-youtube"></i></a>
        
        </div>
    
    </div>
    
    <div class="mobile-menu d-md-block d-lg-block d-xl-none">
    
        <button class="btn_bs offcanvas-close"><i class="fa-solid fa-xmark"></i></button>
    
        <a href="/" class="d-inline-block mb-5"><img src="{{ asset($content->logo) }}" alt="logo"></a>
    
        <nav class="mobile-menu-wrapper mt-4">
    
            <ul>
        
                @foreach ($content->site_categories as $value)
            
                    <li class="has-submenu">
                        
                        <a href="{{$value->url}}">{{ $value->menu }}<span class="ms-1 fs-xs float-end">{!! count((array)$value->items) > 0 ? '<i class="fa-solid fa-angle-right"></i>' : '' !!}</span></a>
                        
                        <ul>
                            
                            @foreach ($value->items as $item)
                            
                                <li>
                                    
                                    <a href="{{$item->url}}">{!! $item->icon ? $item->icon : '' !!} {{$item->menu}}</a>
                                
                                </li>
                    
                            @endforeach
                
                        </ul>

                    </li>

                @endforeach
            
            </ul>
        
        </nav>
        
        <div class="w-100 mt-8">
        
            @auth
            
                <div class="p-3" x-show="step == 1">
                
                    <p><b>Nome: </b>{{Auth::user()->name}}</p>
                    
                    <p><b>E-mail: </b>{{Auth::user()->email}}</p>
                    
                    <button type="button" class="btn btn-neutral w-full mb-3" onclick="location.href='/painel'">Minha FUNDABOM</button>
                    
                    <form class="pb-3" action="{{route('logout')}}" method="post" id="logout">
                    
                        @csrf
                        
                        <a  href="javascript:void(0)" onclick="$('#logout').submit()">Sair</a>
                    
                    </form>
                
                </div>
            
            @endauth
        
            @guest
        
                @livewire('elements.login')
            
            @endguest
        
        </div>
        
        <div class="contact-info mt-8">
        
            <h5 class="mb-20">Contact Info</h5>
            
            <address>
            
                {{ $content->address }} <br>
                
                <a href="{{ $content->phone->url }}"> {{ $content->phone->number }} </a> <br>
                
                <a href="mailto:{{ $content->mailto }}">{{ $content->mailto }}</a>
            
            </address>
            
            <div class="social-contact offcanvas_social mt-4">
            
                <a href="{{ $content->social->facebook }}" class="social-btn"><i class="fab fa-facebook-f"></i></a>
                
                <a href="{{ $content->social->instagram }}" class="social-btn"><i class="fab fa-instagram"></i></a>
                
                <a href="{{ $content->social->linkedin }}" class="social-btn"><i class="fab fa-linkedin-in"></i></a>
                
                <a href="{{ $content->social->twitter }}" class="social-btn"><i class="fab fa-twitter"></i></a>
                
                <a href="{{ $content->social->youtube }}" class="social-btn"><i class="fab fa-youtube"></i></a>
            
            </div>
        
        </div>
    
    </div>

</div>

<!--offcanvas menu end-->