<section id="slider-hero" class="c-hero">
    <div class="c-hero__items js-slider-outer">
        @if ($banners)

            @foreach($banners as $key => $banner)
                @php $image = isset($banner->image) ? url('storage/banner/'.$banner->image) : asset('assets/img/content/hero.jpg'); @endphp
                @php $imageMob = isset($banner->image_mobile) ? url('storage/banner/'.$banner->image_mobile) : ((isset($banner->image)) ? url('storage/banner/'.$banner->image) : asset('assets/img/content/hero.jpg') ); @endphp
                @php  $alt_text = isset($banner->alt_image) ? $banner->alt_image : @$banner->image; @endphp
                <div class="c-hero__item">
                    @php
                        $target = ($banner->target == 1) ? "target=_blank": (($banner->target == 2) ? "data-toggle=modal data-target=#modalCta" : '');
                    @endphp
                    @if($banner->link != '')
                    <a href="{{ $banner->link }}" {{ $target }}>
                    @endif
                        <picture class="c-hero__cover">
                            <source media="(max-width: 768px)" srcset="{{$imageMob}}">
                            <source media="(min-width: 769px)" srcset="{{$image}}">
                            <img src="{{$image}}" alt="{{ $alt_text }}">
                        </picture>
                        <div class="c-hero__wrap container">
                            <div class="c-hero__content">
                                @if ($banner->exibir_titulo)
                                <h1 class="c-hero__title">{!! $banner->name !!}</h1>
                                <p class="c-hero__subtitle">{!! $banner->text !!}</p>
                                @endif
                                @if ($banner->txtbotao)
                                    <span class="c-button"
                                        style="background-color: {{ ($banner->bt_color != '') ? $banner->bt_color : '#F8FA9E' }}; color: #1D1E1C; border-color: transparent;"
                                        onMouseOver="this.style.backgroundColor='transparent'; this.style.color='{{ ($banner->bt_color != '') ? $banner->bt_color : '#F8FA9E' }}'; this.style.borderColor='{{ ($banner->bt_color != '') ? $banner->bt_color : '#F8FA9E' }}'"
                                        onMouseOut="this.style.backgroundColor='{{ ($banner->bt_color != '') ? $banner->bt_color : '#F8FA9E' }}'; this.style.color='#1D1E1C'; this.style.borderColor='{{ ($banner->bt_color != '') ? $banner->bt_color : '#F8FA9E' }}'">{{$banner->txtbotao}}</span>
                                @endif
                            </div>
                        </div>
                    @if($banner->link != '')
                    </a>
                    @endif
                </div>
            @endforeach
        @endif
    </div>

    <div class="c-hero__nav container js-slider-nav">
        @if ($banners)
            @foreach($banners as $key => $banner)
                <button>{{$key+1}}</button>
            @endforeach
        @endif
    </div>
</section>
