@extends('layouts.app')

@section('title', "MJ's Bikes & Accessories - Showroom & Events Gallery")

@section('content')

<!-- HEADER -->
<div class="bg-dark text-white py-4 mb-5">
    <div class="container text-center text-md-start d-flex flex-column flex-md-row justify-content-between align-items-center">
        <div>
            <h1 class="brand-font text-uppercase mb-1 text-white">Photo <span class="text-danger">Gallery</span></h1>
            <p class="text-secondary mb-0">Browse through our showroom highlights, workshop deliveries, and local events.</p>
        </div>
        <nav aria-label="breadcrumb" class="mt-3 mt-md-0">
            <ol class="breadcrumb mb-0 justify-content-center">
                <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-danger text-decoration-none">Home</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">Gallery</li>
            </ol>
        </nav>
    </div>
</div>

<div class="container mb-5">
    
    <!-- Filter Controls -->
    <div class="d-flex justify-content-center gap-2 flex-wrap mb-4" id="galleryFilters">
        <button class="btn btn-outline-mj active rounded-pill px-4 btn-filter" data-filter="all">All Photos</button>
        <button class="btn btn-outline-mj rounded-pill px-4 btn-filter" data-filter="shop">Our Showroom</button>
        <button class="btn btn-outline-mj rounded-pill px-4 btn-filter" data-filter="repairs">Workshop Repairs</button>
        <button class="btn btn-outline-mj rounded-pill px-4 btn-filter" data-filter="events">Cycling Events</button>
        <button class="btn btn-outline-mj rounded-pill px-4 btn-filter" data-filter="customers">Customer Deliveries</button>
    </div>

    <!-- Gallery Items Grid -->
    <!-- Desktop Grid -->
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-3 d-none d-sm-flex mb-4" id="galleryGrid">
        @forelse($galleryItems as $item)
            @php
                $imgUrl = mjs_image($item->image_path, $item->id);
            @endphp
            <div class="col gallery-item" data-category="{{ $item->category }}">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden position-relative product-card h-100">
                    <div class="card-img-wrap" style="padding-top: 75%;">
                        <img src="{{ $imgUrl }}" class="w-100 h-100" style="object-fit: cover;" alt="{{ $item->caption }}">
                    </div>
                    <div class="card-body p-3">
                        <span class="badge bg-danger rounded-pill px-2.5 py-1 text-uppercase mb-2 d-inline-block" style="font-size: 9px;">
                            {{ $item->category }}
                        </span>
                        <p class="card-text text-secondary small mb-0">{{ $item->caption }}</p>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12 text-center py-5">
                <div class="text-muted fs-1 mb-2"><i class="bi bi-images"></i></div>
                <h5 class="fw-bold text-secondary">No Photos Uploaded</h5>
                <p class="text-muted small">Our gallery portfolio is currently empty.</p>
            </div>
        @endforelse
    </div>

    <!-- Mobile Grid -->
    <div class="mobile-grid-2 d-sm-none mb-4" id="galleryGridMobile" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%;">
        @forelse($galleryItems as $item)
            @php
                $imgUrl = mjs_image($item->image_path, $item->id);
            @endphp
            <div class="gallery-item" data-category="{{ $item->category }}" style="width: 100%;">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden position-relative product-card h-100">
                    <div class="card-img-wrap" style="padding-top: 75%;">
                        <img src="{{ $imgUrl }}" class="w-100 h-100" style="object-fit: cover;" alt="{{ $item->caption }}">
                    </div>
                    <div class="card-body p-2">
                        <span class="badge bg-danger rounded-pill px-2 py-1 text-uppercase mb-1 d-inline-block" style="font-size: 8px;">
                            {{ $item->category }}
                        </span>
                        <p class="card-text text-secondary small mb-0" style="font-size: 0.75rem;">{{ $item->caption }}</p>
                    </div>
                </div>
            </div>
        @empty
            <div class="text-center py-5">
                <div class="text-muted fs-1 mb-2"><i class="bi bi-images"></i></div>
                <h5 class="fw-bold text-secondary">No Photos Uploaded</h5>
                <p class="text-muted small">Our gallery portfolio is currently empty.</p>
            </div>
        @endforelse
    </div>
</div>

@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const filters = document.querySelectorAll('.btn-filter');
        const desktopItems = document.querySelectorAll('#galleryGrid .gallery-item');
        const mobileItems = document.querySelectorAll('#galleryGridMobile .gallery-item');
        
        filters.forEach(filter => {
            filter.addEventListener('click', function () {
                // Toggle active filter button style
                filters.forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
                
                const filterValue = this.getAttribute('data-filter');
                
                // Filter desktop grid
                desktopItems.forEach(item => {
                    if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });

                // Filter mobile grid
                mobileItems.forEach(item => {
                    if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });
    });
</script>
@endsection