@extends('frontend.layouts.master')
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
@section('content')

<div class="section mt-0">
    <div class="breadcrumbs-wrap">
        <div class="container">
            <div class="breadcrumbs">
                <a href="{{ url('/') }}">Home</a>
                <span>{{ $page_name }}</span>
            </div>
        </div>
    </div>
</div>

<div class="privacy-policy-area pt-70 pb-70 mt-6 mb-6">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                {{-- Tabs for Services --}}
                <ul class="nav nav-tabs justify-content-center mb-4" role="tablist">
                    @foreach ($services as $service)
                        <li class="nav-item">
                            <a class="nav-link {{ $loop->first ? 'active' : '' }}" data-toggle="tab" href="#service-{{ $service->id }}" role="tab">
                                {{ $service->name }}
                            </a>
                        </li>
                    @endforeach
                </ul>

                {{-- Tab Content Below Tabs --}}
                <div class="tab-content">
                    @foreach ($services as $service)
                        <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="service-{{ $service->id }}" role="tabpanel">
                            {{-- Content for Each Tab --}}
                            <div class="privacy-content pr-20 mb-4">
                                {!! $service->page !!}
                            </div>

                            {{-- Masonry Gallery for the Service --}}
                            <div class="masonry" data-plugin-masonry style="position: relative;">
                                @php
                                    $filteredGalleries = $galleries->where('album_id', $service->id);
                                @endphp

                                @if ($filteredGalleries->isEmpty())
                                    <div class="col-12 text-center">
                                        <p>No images available for this category.</p>
                                    </div>
                                @else
                                    @foreach ($filteredGalleries as $gallery)
                                        <div class="masonry-item" style="padding: 2px;">
                                            <a class="example-image-link" href="{{ asset($gallery->image) }}" data-lightbox="example-set" data-title="{{ $gallery->name }}">
                                                <img class="example-image img-fluid" src="{{ asset($gallery->image) }}" alt="{{ $gallery->name }}" style="width: 100%; height: auto; object-fit: cover; border-radius: 5px;">
                                            </a>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- Pagination --}}
                @if ($galleries->hasPages())
                    <div class="mt-4">
                        {{ $galleries->links('pagination::bootstrap-4') }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Styles --}}
<style>
    .nav-tabs {
        border-bottom: 2px solid #ddd;
        margin-bottom: 20px;
    }

    .nav-tabs .nav-link {
        border: 1px solid #ddd;
        margin-right: 5px;
        color: #555;
        border-radius: 4px;
        padding: 8px 12px;
        transition: all 0.3s ease-in-out;
    }

    .nav-tabs .nav-link.active {
        background-color: #f7eded;
        border-color: #120505;
        color: #120505;
    }

    .tab-content {
        margin-top: 20px;
    }

    .masonry {
        display: flex;
        flex-wrap: wrap;
    }

    .masonry-item {
        flex: 0 0 24%;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    .gallery img {
        border: 1px solid #ddd;
        border-radius: 5px;
        transition: transform 0.3s ease-in-out;
    }

    .gallery img:hover {
        transform: scale(1.05);
        border-color: #120505;
    }
</style>

{{-- Lightbox Script --}}


<script>
    lightbox.option({
        'resizeDuration': 200,
        'wrapAround': true,
        'fadeDuration': 200,
        'showImageNumberLabel': false,
        'disableScrolling': true
    });
</script>

@endsection