@php
    $photos = photo_galleries();
@endphp

<div class="row marginT70">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-12 paddingL8 paddingR8">
                <div class="cartStyle2">
                    <span class="fontSizeCartTitle bgWhiteImp">
                        <a href="{{ route('all.image') }}" class="textDecorationNone colorBlack hoverOrange fontUpperCase">ছবি</a>
                    </span>
                </div>
            </div>

            <div class="col-md-12 padding15">
                <div class="row paddingL8 paddingR8">
                    <div class="col-md-12 padding20 bgBlackLight borderRadius5">
                        <div class="row paddingL8 paddingR8">
                            <!-- Carousel -->
                            <div class="col-md-6 paddingL8 paddingR8">
                                <div class="itemDiv hoverOrange">
                                    <div id="photoGalleryCarousel" class="carousel slide" data-ride="carousel">
                                        <div class="carousel-inner">
                                            @foreach ($photos as $index => $info)
                                                <div class="item {{ $index === 0 ? 'active' : '' }}">
                                                    <a href="{{ route('image.details',$info->id) }}"
                                                       data-lightbox="photo-gallery"
                                                       data-title="{{ $info->title }}">
                                                        <img class="media-object borderRadius5"
                                                             src="{{ asset('storage/project_files/photo/' . $info->photo) }}"
                                                             onerror="this.onerror=null;this.src='{{ asset('channels/placeholder.webp') }}';"
                                                             alt="{{ $info->title }}"
                                                             title="{{ $info->title }}">
                                                        <span class="pvIconSmall marginT15 borderRadius0Imp photoGalleryIcon">
                                                            <i class="fa fa-image"></i>
                                                        </span>
                                                    </a>
                                                    <div class="caption paddingT15">
                                                        <h2 class="title4 margin0">
                                                            <a href="{{ route('image.details',$info->id) }}" class="colorWhite hoverOrange textDecorationNone">
                                                                {{ $info->title }}
                                                            </a>
                                                        </h2>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>

                                        <!-- Carousel Controls -->
                                        <a class="left carousel-control bgImageNone" href="#photoGalleryCarousel" role="button" data-slide="prev">
                                            <span class="glyphicon glyphicon-chevron-left photoGalleryPrevButton" aria-hidden="true"></span>
                                            <span class="sr-only">Previous</span>
                                        </a>
                                        <a class="right carousel-control bgImageNone" href="#photoGalleryCarousel" role="button" data-slide="next">
                                            <span class="glyphicon glyphicon-chevron-right photoGalleryNextButton" aria-hidden="true"></span>
                                            <span class="sr-only">Next</span>
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <!-- Grid Images -->
                            <div class="col-md-6 paddingR15">
                                <div class="row">
                                    @foreach ($photos as $index => $info)
                                        @if ($index >= 1 && $index <= 6)
                                            <div class="col-md-6 paddingR15">
                                                <div class="col-md-12 flex-col paddingL8 paddingR8 marginB15">
                                                    <div class="media positionRelative hoverOrange padding15 marginT0 bgAshLight">
                                                        <div class="media-left media-middle">
                                                            <div class="positionRelative">
                                                                <a href="{{ route('image.details',$info->id) }}"
                                                                   data-lightbox="photo-gallery"
                                                                   data-title="{{ $info->title }}">
                                                                    <img width="148" class="media-object borderRadius5"
                                                                         src="{{ asset('storage/project_files/photo/' . $info->photo) }}"
                                                                         onerror="this.onerror=null;this.src='{{ asset('channels/placeholder.webp') }}';"
                                                                         alt="{{ $info->title }}"
                                                                         title="{{ $info->title }}">
                                                                </a>
                                                                <span class="pvIconSmall marginT15 borderRadius0Imp photoGalleryIcon">
                                                                    <i class="fa fa-image"></i>
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div class="media-body">
                                                            <h2 class="title3 margin0 colorBlack hoverOrange three-line">
                                                                {{ $info->title }}
                                                            </h2>
                                                        </div>
                                                        <a href="{{ route('image.details',$info->id) }}" class="linkOverlay"></a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>

                                <!-- Read More -->
                                <div class="col-md-12 paddingL8 paddingR8">
                                    <div class="text-right">
                                        <p class="readMoreDiv">
                                            <span class="bgBlackLightImp">
                                                <a class="textDecorationNone hoverOrange colorWhite fontSizeReadMore" href="{{ route('all.image') }}">
                                                    আরও <i class="fa fa-caret-right fontSize16"></i>
                                                </a>
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <!-- End Grid -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>