@extends('core::public.psim')

@section('title', $model->media_meta_title)
@section('ogTitle', $model->media_meta_title)
@section('description', $model->media_meta_description)
@section('ogImage', $model->present()->image(1200, 630))
@section('bodyClass', 'body-conferences body-conference-' . $model->id . ' body-page')

@section('breadcrumb', 'Glimpses from ' . $model->title)

@section('content')
    <div class="beaddumtitle">
        <div class="container breadum-container">
            <div class="pagetitle">
                <h3 class="title-heading">Our Gallery</h3>
                <div class="divider gallery-background-image-heading-divider"></div>
            </div>
            <div class="breadummenu">
                <a href="/">Home</a> &nbsp; > &nbsp; <span>{{htmlspecialchars("Our Gallery")}}</span>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <div class="container homegallery">
        <div class="col-12">
            <div class="Midsummer_Title model-title-main mb-4">
                <div class="Midsummer_maintitle text-center">Glimpses from {{ $model->title }}</div>
                <div class="Midsummer_divider mb-1"></div>
            </div>
        </div>
        <div class="row gallery">
            @if ($model->images->count() > 0)
                @foreach ($model->images->sortBy('created_at') as $image)
                    <div class="col-6 col-sm-6 col-md-6 col-lg-3 thumb">
                        <a href="{{ $image->present()->image() }}">
                            <figure><img class="img-fluid img-thumbnail" src="{{ $image->present()->image(424, 350) }}"
                                    alt="Random Image" />
                            </figure>
                        </a>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".gallery").magnificPopup({
                delegate: "a",
                type: "image",
                mainClass: "mfp-img-mobile",
                gallery: {
                    enabled: true,
                    navigateByImgClick: false,
                    preload: [0, 1],
                    arrowMarkup: `
                                <button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%">
                                    <i class="fa fa-arrow-%dir%"></i>
                                </button>`,
                    tNext: 'Next (right arrow)', // Changed label to 'Next' for right button
                    tPrev: 'Prev (left arrow)',   // Changed label to 'Prev' for left button
                },
                image: {
                    tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
                },
                closeOnContentClick: false,
                closeOnBgClick: false,
                removalDelay: 300,
                callbacks: {
                    open: function () {
                        console.log('Popup is now open');
                        // Swap arrow icon directions
                        $(".mfp-arrow-left i").removeClass("fa-arrow-left").addClass("fa-arrow-right");
                        $(".mfp-arrow-right i").removeClass("fa-arrow-right").addClass("fa-arrow-left");

                        // Remove existing click events on the arrows to avoid duplicates
                        $(".mfp-arrow-left").off("click");
                        $(".mfp-arrow-right").off("click");

                        // Add new click events to swap the functionality
                        $(".mfp-arrow-left").on("click", function () {
                            $.magnificPopup.instance.next(); // Left arrow shows next image
                        });
                        $(".mfp-arrow-right").on("click", function () {
                            $.magnificPopup.instance.prev(); // Right arrow shows previous image
                        });
                    },
                    change: function () {
                        console.log('Image changed');
                    }
                }
            });
        });

    </script>

@endsection