@extends("access.visa-success.theme")
@section("content")
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">

<style>
    /* Style for gallery items */
    .gallery-item {
        width: 200px;
        height: 200px;
        margin: 10px;
        overflow: hidden;
        position: relative;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease-in-out;
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Hover effect */
    .gallery-item:hover {
        transform: scale(1.05);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col my-3 mx-2" style="background-color: #cc2766; color: #FFF; border-radius: 5px;"><h1>Generated Visa Successes</h1></div>
    </div>
    <div class="row">
        <div class="col">
            <div class="button-group filter-button-group mb-3">
                <button class="button is-checked btn btn-success px-2" data-filter="*">Show All</button>
                @foreach($Branches as $Branch)
                @php $branchAlias = str_replace("-", "_", $Branch->alias) @endphp
                <button class="button btn btn-success px-2" data-filter=".{{ $branchAlias }}">{{ $Branch->title }}</button>
                @endforeach
            </div>
            <div class="gallery">
                @foreach($Branches as $Branch)
                @php $branchAlias = str_replace("-", "_", $Branch->alias) @endphp
                @foreach($Branch->Visas as $Visa)

                <a href="{{ asset('storage/access/visa_success_' .  $branchAlias . '/' . $Visa) }}" data-lightbox="{{  $branchAlias }}" data-title="{{ $Visa }}">
                    <div class="gallery-item {{  $branchAlias }}">
                        <img src="{{ asset('storage/access/visa_success_' .  $branchAlias . '/' . $Visa) }}" alt="{{ $Visa }}">
                    </div>
                </a>
                @endforeach
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

<script>
    $(document).ready(function() {
        var $gallery = $('.gallery').isotope({
            itemSelector: '.gallery-item',
            layoutMode: 'fitRows',
            getSortData: {
                category: 'data-filter'
            },
        });

        // Filter items on category button click
        $('.filter-button-group').on('click', 'button', function() {
            var filterValue = $(this).attr('data-filter');
            $gallery.isotope({
                filter: filterValue
            });
        });

        // Change active class on buttons
        $('.filter-button-group').each(function(i, buttonGroup) {
            var $buttonGroup = $(buttonGroup);
            $buttonGroup.on('click', 'button', function() {
                $buttonGroup.find('.active').removeClass('active');
                $(this).addClass('active');
            });
        });
    });
</script>
@endpush