@extends('layouts.master')
@section('content')
    {{-- <section class="page-title"
        style="background-image:url('{{ asset('/public/frontend_assets/images/background/fff.jpg') }}');">

        <div class="auto-container">
            <div class="sec-title">
                <h1>Gallery</h1>
                <div class="bread-crumb"><a href="{{ url('/') }}">Home</a> / <a
                        href="{{ url('/media-gallery/photo-of-program') }}" class="current">gallery</a></div>
            </div>
        </div>
    </section> --}}

    <!--Gallery Section-->
    <section class="gallery-section">
        <div class="auto-container">

            <!--Filter-->
            <div class="filters text-center">
                <ul class="filter-tabs filter-btns clearfix anim-3-all">
                    <a href="{{ url('/media-gallery/photo-of-program') }}">
                        <li class="active filter" data-role="button" data-filter="">All</li>
                    </a>

                    @foreach ($albume as $albume)
                        <a href="{{ url('/media-gallery/photo-of-program/' . $albume->id) }}">
                            <li class="filter" data-role="button" data-filter="">{{ $albume->title }}</li>
                        </a>
                    @endforeach
                </ul>
            </div>

            <div class="images-container">

                <div class="items-container row clearfix">
                    @foreach ($gallary as $item)
                        <!--Column-->
                        <div class="column all eco plants col-md-4 col-sm-6 col-xs-12">
                            <!--Default Portfolio Item-->
                            <div class="default-portfolio-item">
                                <div class="inner-box text-center">
                                    <!--Image Box-->

                                    <figure class="image-box"><img height="200px"
                                            src="{{ asset('public/upload/' . $item->image) }}" alt="">
                                    </figure>
                                    <div class="overlay-box">
                                        <div class="inner-content">
                                            <div class="content">
                                                <h3>
                                                    <a href="#">
                                                        @php
                                                            $maxLength = 10;
                                                            if (strlen($item->title) > $maxLength) {
                                                                $truncatedText = substr($item->title, 0, $maxLength) . '...'; // Adding ellipsis
                                                                echo $truncatedText;
                                                            } else {
                                                                echo $item->title;
                                                            }
                                                        @endphp
                                                    </a>
                                                </h3>
                                                <a class="arrow lightbox-image"
                                                    href="{{ asset('public/upload/' . $item->image) }}"
                                                    title="{{ $item->title }}"><span
                                                        class="icon flaticon-cross-4"></span></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>

            </div>
    </section>
@endsection