@extends('site.master')
@section('main-content')
<section class="af-hdr ">
    <div class="header-decoration position-absolute">
        <img src="{{ asset('site/img/shape_nate.svg') }}" alt="">
    </div>
    <div class="container position-relative" style="z-index: 9">
        <div class="row">
            <div class="col-sm-12">
                <h1 class=" text-uppercase text-white fnt-fam-ser fs-2 fwc-700">




                    @lang('language.photogallery')</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="list-inline-item"><a class="text-white" href="{{ URL::to('/') }}"
                                class="text-decoration-none">@lang('language.home')</a>
                        </li>

                        <li class="list-inline-item current text-danger">
                            @lang('language.photogallery') </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <div class="decoration-pattern pattern-one position-absolute">
        <img src="{{ asset('site/img/breadcrumb_shape_pattern_1.svg') }}" alt="">
    </div>
    <div class="decoration-pattern pattern-two position-absolute">
        <img src="{{ asset('site/img/breadcrumb_shape_pattern_2.svg') }}" alt="">
    </div>
</section>


    <section class="py-5">
        <div class="container">
            <div class="row d-flex align-items-center justify-content-center">
                @if (!$list->IsEmpty())
                    @foreach ($list as $item)
                        <div class="col-lg-4 position-relative mb-3">
                            <div class="imag-section position-relative bg-white shadow"
                                style="min-height: 245px;">
                                <img src="{{ asset($item->image) }}" alt="{{ $item->title }}"
                                    style="height: 245px;
                                    object-fit: cover;
                                    width: 100%;">
                                <span class="position-absolute r-st bg-custom-blue-dark2 text-white p-1 px-3 rounded-1"> {{ numEnToNp($item->photo_count + 1) }}
                                    @lang('language.photo')</span>
                            </div>

                            <div style="min-height: 55px;line-height: 1.3;"
                                class="py-2 px-2 bg-white bg-opacity-10 text-custom-blue-dark2 fs-6 shadow ">
                                {{ $item->title }} </div>
                            <a href="{{ route('gallery', ['album_id' => $item->slug]) }}"
                                class="stretched-link"></a>
                        </div>
                    @endforeach

                    <div class=" clearfix">
                        {{ $list->links() }}
                    </div>
                @else
                    <tr>
                        <td colspan="7">{!! NO_RECORD !!}</td>
                    </tr>
                @endif
            </div>

        </div>
    </section>
@endsection

@push('script')
    <!-- lightgallery plugins -->
    <script src="{{ asset('site/lightgallery/lightgallery.min.js') }}"></script>


    <script>
        $(document).ready(function() {

            window.prettyPrint && prettyPrint()

            // Animated thumbnails
            var $animThumb = $('#aniimated-thumbnials');
            if ($animThumb.length) {
                $animThumb.justifiedGallery({
                    border: 6
                }).on('jg.complete', function() {
                    lightGallery($animThumb[0], {
                        thumbnail: true
                    });
                });
            };

            //thumbnails without animation
            var $thumb = $('#thumbnials-without-animation');
            if ($thumb.length) {
                $thumb.justifiedGallery({
                    border: 6
                }).on('jg.complete', function() {
                    lightGallery($thumb[0], {
                        thumbnail: true,
                        animateThumb: false,
                        showThumbByDefault: false
                    });
                });
            };

        });
    </script>
@endpush