@if($type == 'header_carousel')

<div id="carouselHeaderIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselHeaderIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselHeaderIndicators" data-slide-to="1"></li>
        <li data-target="#carouselHeaderIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        @foreach ([
            0 => [
                'img' => URL::asset('webshop/c_001.jpg'),
                'title' => '',
                'content' => 'Országos kiszállítás akár már holnapra futárszolgálattal!',
                'button' => '',
                'active' => true,
            ],
            1 => [
                'img' => URL::asset('webshop/c_002.jpg'),
                'title' => '',
                'content' => '100.000 bevizsgált alkatrész',
                'button' => '',
                'active' => false,
            ],
            2 => [
                'img' => URL::asset('webshop/c_003.jpg'),
                'title' => '',
                'content' => '15 nap beépítési garancia minden alkatrészre',
                'button' => '',
                'active' => false,
            ],
        ] as $item)
            <div class="carousel-item @if($item['active']) active @endif" style="position: relative">
                <div class="carousel-img w-100" style="background-color: #000000; position: relative;">
                    <img src="{{ $item['img'] }}" style="opacity: 0.2; position: absolute; left: 0; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);" class="w-100">
                </div>
                <div class="d-block w-100" style="position: absolute; top: 0;">
                    <div class="d-flex justify-content-center mt-5"> <h2 class="mb-4 mb-lg-5" style="color: #ffffff !important;"> {{$item['title']}} </h2> </div>
                    <div class="d-flex justify-content-center text-center mt-4"> <p class="mb-4 mb-lg-5" style="font-size: 25px; color: #ffffff !important;"> {{$item['content']}} </p> </div>
                    <div class="d-flex justify-content-center"> @if($item['button']) <button type="button" class="btn btn-primary mb-4 mb-lg-5 d-none" style="width:200px;">Tovább</button> @endif </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

@endif

@if($type == 'rarting_carousel')
    @php
        $max = 10;
        $ratings = $ratings->count() > $max ? $ratings?->get()->random($max)->shuffle()->chunk(2) : $ratings?->get()->chunk(2);
    @endphp

        <div id="carouselRatingIndicators" class="carousel slide" data-ride="carousel" style="background: #F2F2F7;">
            <ol class="carousel-indicators">
                @for ($i=1; $i<=count($ratings); $i++)
                    <li data-target="#carouselRatingIndicators" data-slide-to="{{$i-1}}" @if($i == 1) class="active" @endif></li>
                @endfor
            </ol>
            <div class="carousel-inner">
                @foreach ($ratings as $chunk)
                    <div class="carousel-item @if($loop->index == 0) active @endif p-0 p-lg-4">
                        <div class="d-flex justify-content-center">
                            @foreach ($chunk as $item)
                                <div class="mx-1 mx-lg-3 w-100 w-lg-25">
                                    <h5 class="mb-3 text-center">{{$item->customer()->first()?->FullName ?? 'Anonymus'}}</h5>
                                    <ul class="list-unstyled d-flex justify-content-center text-warning">
                                        @for ($i=1; $i<=$item['rating']; $i++)
                                            <li><i class="fas fa-star fa-sm"></i></li>
                                        @endfor
                                        @for ($i=1; $i<=5-$item['rating']; $i++)
                                            <li><i class="far fa-star fa-sm"></i></li>
                                        @endfor
                                    </ul>

                                    <div class="row">
                                        <div class="col"><hr></div>
                                        <div class="col-*"><i class="text-muted fas fa-quote-left pe-2"></i></div>
                                        <div class="col"><hr></div>
                                    </div>

                                    <div style="height:140px; overflow:hidden;">
                                        <p class="text-muted text-center">
                                            {{$item['comment']}}
                                        </p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
@endif