@section('page-title', $album->title)

@section('page-image', asset($albumimage ?? $albumimage))
@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">




                        {{ $album->title }}</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"><a class="text-white" href="{{ URL::to('/') }}"
                                    class="text-decoration-none"> @lang('language.photogallery')</a>
                            </li>
                            <li class="list-inline-item current text-danger">
                                {{ $album->title }}</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="d-main">
        <div class="container mb-3 pb-3">
            <div class="row mb-3">
                <div class="d-flex align-items-center justify-content-between py-3 border-bottom">
                    <div class="d-flex gap-3 fwc-600 text-black-50 " style="font-size: 14px;">

                        @isset($album->eventdate)
                            <span> <i class="bi-clock"></i>
                                {{ getNepaliDate($album->eventdate) }}
                            </span>
                        @endisset

                      
                    </div>
                      <div class="d-flex flex-column flex-lg-row gap-3 align-items-center">
                    <span>Share</span>
                    <div class="d-flex flex-wrap gap-3">
                        <a target="_blank"
                            href="https://twitter.com/intent/tweet?original_referer={{ URL::current() }}&url={{ URL::current() }}&text={{ $album->title }}"
                            class="text-decoration-none text-dark fs-5 text-hover-danger d-flex align-items-center gap-1">
                            <i class="bi bi-twitter"></i> <span class="fs-6">Twitter</span>
                        </a>

                        <a target="_blank" href="https://www.facebook.com/sharer.php?u={{ URL::current() }}"
                            class="text-decoration-none text-dark fs-5 text-hover-primary d-flex align-items-center gap-1">
                            <i class="bi bi-facebook" aria-hidden="true"></i> <span class="fs-6">Facebook</span>
                        </a>

                        <a target="_blank" href="https://www.linkedin.com/sharing/share-offsite/?url={{ URL::current() }}"
                            class="text-decoration-none text-dark fs-5 text-hover-info d-flex align-items-center gap-1">
                            <i class="bi bi-linkedin" aria-hidden="true"></i> <span class="fs-6">LinkedIn</span>
                        </a>

                        <a target="_blank"
                            href="mailto:?subject={{ urlencode($album->title) }}&body={{ URL::current() }}"
                            class="text-decoration-none text-dark fs-5 text-hover-success d-flex align-items-center gap-1">
                            <i class="bi bi-envelope" aria-hidden="true"></i> <span class="fs-6">Email</span>
                        </a>

                        <a target="_blank"
                            href="https://api.whatsapp.com/send?text={{ urlencode($album->title) }}%20{{ URL::current() }}"
                            class="text-decoration-none text-dark fs-5 text-hover-success d-flex align-items-center gap-1">
                            <i class="bi bi-whatsapp" aria-hidden="true"></i> <span class="fs-6">WhatsApp</span>
                        </a>

                        <a target="_blank" href="sms:?body={{ urlencode($album->title) }}%20{{ URL::current() }}"
                            class="text-decoration-none text-dark fs-5 text-hover-secondary d-flex align-items-center gap-1">
                            <i class="bi bi-chat-left-text-fill" aria-hidden="true"></i> <span class="fs-6">SMS</span>
                        </a>


                    </div>
                </div>
                </div>

            </div>
            <div id="gallery">
                <div class="container-fluid pb-4">
                    <div class="row gallery-container row-cols-6 mx-auto gap-2" id="animated-thumbnails-gallery">

                       
                        @if ($GalleryList->isEmpty())
                         <a href="{{ asset($albumimage) }}" class="col shadow-sm border border-light">
                            <img src="{{ asset($albumimage) }}" alt="{{ $album->title }}">
                        </a>
                        @else
                            @foreach ($GalleryList as $album)
                                <a href="{{ asset($album->image) }}" class="col shadow-sm border border-light">
                                    <img src="{{ asset($album->image) }}" alt="{{ $album->title }}">
                                </a>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>




@endsection

@push('script')
    <!-- lightgallery plugins -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.3/css/lightgallery.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.3/css/lg-zoom.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/css/justifiedGallery.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.3/css/lg-thumbnail.css">
    <link rel="stylesheet" href="{{ asset('site/lightgallery/css/lightgallery-bundle.css') }}">




    <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.3/lightgallery.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.3/plugins/zoom/lg-zoom.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.3/plugins/thumbnail/lg-thumbnail.umd.js"></script>

    <script>
        jQuery("#animated-thumbnails-gallery")
            .justifiedGallery({
                captions: true,
                rowHeight: 250,
                margins: 10
            })
            .on("jg.complete", function() {
                window.lightGallery(
                    document.getElementById("animated-thumbnails-gallery"), {
                        autoplayFirstVideo: false,
                        pager: false,
                        galleryId: "nature",
                        plugins: [lgZoom, lgThumbnail],
                        mobileSettings: {
                            controls: false,
                            showCloseIcon: false,
                            download: false,
                            rotate: false
                        }
                    }
                );
            });
    </script>
@endpush