@extends('layouts.frontend')
@section('title_page', 'Gallery - Rusizi Veterinary')

@section('content')

<!--Start breadcrumb area-->
<section class="breadcrumb-area style2" style="background-image: url({{ asset('images/resources/breadcrumb-bg-2.jpg') }});">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="inner-content-box clearfix">
                    <div class="title-s2 text-center">
                        <span>Our Gallery</span>
                        <h1>Veterinary <span style="color: rgb(25, 210, 96)">Gallery</span></h1>
                    </div>
                    <div class="breadcrumb-menu float-left">
                        <ul class="clearfix">
                            <li><a href="/">Home</a></li>
                            <li class="active">Gallery</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End breadcrumb area-->

<!--Start Main Gallery Area-->
<section class="main-project-area">
    <div class="container">
        <!-- Category Filter -->
        <ul class="project-filter post-filter has-dynamic-filters-counter">
            <li class="{{ !request()->routeIs('gallery.image.category') ? 'active' : '' }}">
                <a href="{{ route('gallery') }}" class="filter-text">All Images</a>
            </li>
            @foreach($categories as $category => $count)
            <li class="{{ request('category') == $category || (isset($currentCategory) && $currentCategory == $category) ? 'active' : '' }}">
                <a href="{{ route('gallery.image.category', $category) }}" class="filter-text">
                    {{ $category }} <span class="count">({{ $count }})</span>
                </a>
            </li>
            @endforeach
        </ul>

        <!-- Gallery Grid -->
        <div class="row filter-layout masonary-layout">
            @if($galleries->count() > 0)
                @foreach($galleries as $gallery)
                <!--Start single project item-->
                <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 filter-item {{ strtolower(str_replace(' ', '-', $gallery->category)) }}">
                    <div class="single-project-style4">
                        <div class="img-holder">
                            <div class="inner">
                                <img src="{{ asset('public/gallery/'. $gallery->image_path) }}" alt="{{ $gallery->image_title }}" loading="lazy">
                                <div class="overlay-box">
                                    <div class="box">
                                        <div class="link">
                                            <a href="{{ asset('public/gallery/'. $gallery->image_path) }}" data-fancybox="gallery" data-caption="{{ $gallery->image_title }}">
                                                <span class="icon-out"><i class="fas fa-expand"></i></span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="overlay-content">
                                <div class="title">
                                    <span>{{ $gallery->category }}</span>
                                    <h3>{{ $gallery->image_title }}</h3>
                                </div>
                                @if($gallery->description)
                                <div class="description">
                                    <p>{{ Str::limit($gallery->description, 80) }}</p>
                                </div>
                                @endif
                                <div class="gallery-meta">
                                    <div class="meta-item">
                                        <i class="fas fa-user"></i>
                                        <span>{{ $gallery->user->name }}</span>
                                    </div>
                                    <div class="meta-item">
                                        <i class="fas fa-calendar"></i>
                                        <span>{{ $gallery->created_at->format('M d, Y') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End single project item-->
                @endforeach
            @else
            <!-- No Images Found -->
            <div class="col-xl-12">
                <div class="no-images-found text-center">
                    <div class="no-images-icon">
                        <i class="fas fa-images"></i>
                    </div>
                    <h3>No Images Found</h3>
                    <p>There are no images to display in the gallery at the moment.</p>
                    @if(Auth::check())
                    <a href="{{ route('gallery.create') }}" class="btn-style1">
                        <span class="txt">Add New Image</span>
                    </a>
                    @endif
                </div>
            </div>
            @endif
        </div>

        <!-- Pagination -->
        @if($galleries->hasPages())
        <div class="row">
            <div class="col-xl-12">
                <div class="footer-pagination">
                    <ul class="clearfix">
                        {{ $galleries->links('vendor.pagination.custom') }}
                    </ul>
                </div>
            </div>
        </div>
        @endif
    </div>
</section>
<!--End Main Gallery Area-->

<!-- Add Image Button for Authenticated Users -->
@if(Auth::check())
<div class="floating-action-btn">
    <a href="{{ route('gallery.create') }}" class="btn-floating">
        <i class="fas fa-plus"></i>
    </a>
    <span class="tooltip">Add Image</span>
</div>
@endif
 
<!-- Add Fancybox for Lightbox -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>

<script>
 

    // Add smooth scrolling for filter links
    document.querySelectorAll('.project-filter a').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const href = this.getAttribute('href');
            
            // Smooth scroll to top
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
            
            // Navigate after a short delay
            setTimeout(() => {
                window.location.href = href;
            }, 300);
        });
    });
 
</script>


<style>
    /* Gallery Specific Styles */
  
    .project-filter .count {
        font-size: 12px;
        opacity: 0.8;
    }

    /* Single Gallery Item */
    .single-project-style4 {
        margin-bottom: 30px;
    }

    .single-project-style4 .img-holder {
        position: relative;
        overflow: hidden;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .single-project-style4 .img-holder:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .single-project-style4 .img-holder .inner {
        position: relative;
        overflow: hidden;
    }

    .single-project-style4 .img-holder .inner img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        transition: all 0.5s ease;
    }

    .single-project-style4 .img-holder:hover .inner img {
        transform: scale(1.1);
    }

    .single-project-style4 .overlay-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(39, 174, 96, 0.9);
        opacity: 0;
        transition: all 0.5s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .single-project-style4 .img-holder:hover .overlay-box {
        opacity: 1;
    }

    .single-project-style4 .overlay-box .box {
        text-align: center;
    }

    .single-project-style4 .overlay-box .link a {
        display: inline-block;
        width: 60px;
        height: 60px;
        background: #fff;
        border-radius: 50%;
        text-align: center;
        line-height: 60px;
        color: #27ae60;
        font-size: 18px;
        transition: all 0.3s ease;
    }

    .single-project-style4 .overlay-box .link a:hover {
        background: #2c3e50;
        color: #fff;
        transform: rotate(90deg);
    }

    .single-project-style4 .overlay-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
        color: #fff;
        padding: 30px 25px 25px;
        transform: translateY(100%);
        transition: all 0.5s ease;
    }

    .single-project-style4 .img-holder:hover .overlay-content {
        transform: translateY(0);
    }

    .single-project-style4 .overlay-content .title span {
        display: block;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #27ae60;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .single-project-style4 .overlay-content .title h3 {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        line-height: 1.3;
    }

    .single-project-style4 .overlay-content .description {
        margin: 10px 0;
    }

    .single-project-style4 .overlay-content .description p {
        font-size: 13px;
        line-height: 1.4;
        opacity: 0.9;
        margin: 0;
    }

    .single-project-style4 .gallery-meta {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .single-project-style4 .meta-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        opacity: 0.8;
    }

    .single-project-style4 .meta-item i {
        font-size: 10px;
        color: #27ae60;
    }

    /* No Images Found */
    .no-images-found {
        padding: 80px 20px;
        text-align: center;
    }

    .no-images-found .no-images-icon {
        width: 100px;
        height: 100px;
        background: #f8fafc;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        color: #bdc3c7;
        font-size: 2.5rem;
    }

    .no-images-found h3 {
        color: #2c3e50;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .no-images-found p {
        color: #7f8c8d;
        margin-bottom: 25px;
        font-size: 16px;
    }

    /* Floating Action Button */
    .floating-action-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 1000;
    }

    .btn-floating {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #27ae60, #219653);
        color: white;
        border-radius: 50%;
        text-decoration: none;
        box-shadow: 0 5px 15px rgba(39, 174, 96, 0.4);
        transition: all 0.3s ease;
        position: relative;
    }

    .btn-floating:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 25px rgba(39, 174, 96, 0.6);
        color: white;
    }

    .btn-floating i {
        font-size: 20px;
    }

    .tooltip {
        position: absolute;
        right: 70px;
        top: 50%;
        transform: translateY(-50%);
        background: #2c3e50;
        color: white;
        padding: 8px 15px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .btn-floating:hover .tooltip {
        opacity: 1;
        visibility: visible;
        right: 80px;
    }

    /* Pagination */
    .footer-pagination {
        text-align: center;
        margin-top: 50px;
    }

    .footer-pagination ul {
        display: inline-flex;
        gap: 10px;
    }

    .footer-pagination li {
        display: inline-block;
    }

    .footer-pagination a,
    .footer-pagination span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        color: #2c3e50;
        font-weight: 600;
        text-decoration: none;
        border: 2px solid #e8f0fe;
        transition: all 0.3s ease;
    }

    .footer-pagination a:hover,
    .footer-pagination .active span {
        background: #27ae60;
        color: #fff;
        border-color: #27ae60;
    }

    /* Responsive Design */
    @media (max-width: 1200px) {
        .single-project-style4 .img-holder .inner img {
            height: 280px;
        }
    }

    @media (max-width: 991px) {
        .single-project-style4 .img-holder .inner img {
            height: 250px;
        }
        
        .project-filter li {
            margin: 0 5px 8px;
        }
        
        .project-filter li a {
            padding: 10px 20px;
            font-size: 13px;
        }
    }

    @media (max-width: 767px) {
        .main-project-area {
            padding: 60px 0;
        }
        
        .single-project-style4 .img-holder .inner img {
            height: 220px;
        }
        
        .project-filter {
            margin-bottom: 40px;
        }
        
        .floating-action-btn {
            bottom: 20px;
            right: 20px;
        }
        
        .btn-floating {
            width: 50px;
            height: 50px;
        }
        
        .btn-floating i {
            font-size: 18px;
        }
    }

    @media (max-width: 575px) {
        .single-project-style4 .img-holder .inner img {
            height: 200px;
        }
        
        .project-filter li {
            display: block;
            margin: 0 0 8px;
        }
        
        .project-filter li a {
            display: block;
            border-radius: 8px;
        }
        
        .single-project-style4 .overlay-content {
            padding: 20px 15px 15px;
        }
        
        .single-project-style4 .overlay-content .title h3 {
            font-size: 16px;
        }
    }
</style>


@endsection