239 lines
13 KiB
PHP
239 lines
13 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
@extends('layouts.user.app')
|
|
|
|
<title>Legacy Eatery & Space Dashboard</title>
|
|
</head>
|
|
|
|
@section('content')
|
|
<div class="container mx-auto px-4">
|
|
<div class="p-4 rounded-lg">
|
|
<!-- Carousel Section -->
|
|
<section class="mb-8">
|
|
<h2 class="text-2xl font-bold text-maroon mb-6">Gallery</h2>
|
|
|
|
<h3 class="text-xl font-semibold text-maroon mb-4"></h3>
|
|
<div id="gallery-carousel" class="relative w-full mb-8" data-carousel="static">
|
|
<!-- Carousel wrapper -->
|
|
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
|
|
<!-- Items -->
|
|
@forelse($carouselImages->where('is_active', true) as $image)
|
|
<div class="hidden duration-700 ease-in-out" data-carousel-item>
|
|
<img src="{{ asset('storage/' . $image->image) }}" class="absolute block w-full h-full object-cover -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Carousel Image">
|
|
</div>
|
|
@empty
|
|
<div class="hidden duration-700 ease-in-out" data-carousel-item>
|
|
<img src="{{ asset('images/indoor cafe.jpeg') }}" class="absolute block w-full h-full object-cover -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Indoor Cafe">
|
|
</div>
|
|
<div class="hidden duration-700 ease-in-out" data-carousel-item>
|
|
<img src="{{ asset('images/vip indoor.jpeg') }}" class="absolute block w-full h-full object-cover -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="VIP Indoor">
|
|
</div>
|
|
<div class="hidden duration-700 ease-in-out" data-carousel-item>
|
|
<img src="{{ asset('images/outdoor cafe.jpeg') }}" class="absolute block w-full h-full object-cover -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Outdoor Cafe">
|
|
</div>
|
|
<div class="hidden duration-700 ease-in-out" data-carousel-item>
|
|
<img src="{{ asset('images/vip outdoor.jpeg') }}" class="absolute block w-full h-full object-cover -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="VIP Outdoor">
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
<!-- Slider controls -->
|
|
<button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 group-hover:bg-black/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
|
|
<i class="fas fa-chevron-left text-white"></i>
|
|
<span class="sr-only">Previous</span>
|
|
</span>
|
|
</button>
|
|
<button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 group-hover:bg-black/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
|
|
<i class="fas fa-chevron-right text-white"></i>
|
|
<span class="sr-only">Next</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Gallery Cafe Heading -->
|
|
<h3 class="text-2xl font-bold text-maroon my-8 text-center">Gallery Cafe</h3>
|
|
|
|
<!-- Gallery Categories Slider -->
|
|
<div class="relative w-full mb-8">
|
|
<div class="overflow-hidden">
|
|
<div id="categories-slider" class="flex transition-transform duration-300 ease-in-out">
|
|
@foreach($galleryCategories->chunk(4) as $categoryChunk)
|
|
<div class="w-full flex-none">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
@foreach($categoryChunk as $category)
|
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-shadow duration-300">
|
|
<div class="relative">
|
|
<a href="#" data-fancybox="category-{{ $category->id }}" data-src="{{ asset('storage/' . $category->images->first()?->image ?? $category->thumbnail) }}">
|
|
<img src="{{ asset('storage/' . $category->thumbnail) }}" alt="{{ $category->name }}" class="w-full h-48 object-cover">
|
|
<div class="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
|
<span class="text-white text-lg font-semibold px-4 py-2 rounded-lg bg-maroon">
|
|
View Gallery
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="p-4">
|
|
<h4 class="text-lg font-semibold text-maroon mb-2">{{ $category->name }}</h4>
|
|
<p class="text-gray-600 text-sm">{{ $category->description }}</p>
|
|
<div class="mt-3 text-sm text-gray-500">
|
|
<i class="fas fa-images mr-1"></i>
|
|
{{ $category->images->count() }} photos
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden Gallery Images -->
|
|
<div class="hidden">
|
|
@foreach($category->images as $image)
|
|
<a href="{{ asset('storage/' . $image->image) }}"
|
|
data-fancybox="category-{{ $category->id }}"
|
|
data-caption="{{ $image->caption }}"
|
|
class="hidden">
|
|
<img src="{{ asset('storage/' . $image->image) }}" alt="{{ $image->caption }}">
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Simple Navigation Arrows -->
|
|
<button type="button" id="prev-button" class="absolute left-0 top-1/2 -translate-y-1/2 bg-white p-2 rounded-full shadow-lg border border-gray-200 hover:bg-gray-50">
|
|
<i class="fas fa-chevron-left text-maroon"></i>
|
|
</button>
|
|
<button type="button" id="next-button" class="absolute right-0 top-1/2 -translate-y-1/2 bg-white p-2 rounded-full shadow-lg border border-gray-200 hover:bg-gray-50">
|
|
<i class="fas fa-chevron-right text-maroon"></i>
|
|
</button>
|
|
|
|
<!-- Simple Dots Navigation -->
|
|
<div class="flex justify-center mt-4 space-x-2">
|
|
@foreach($galleryCategories->chunk(4) as $index => $chunk)
|
|
<button type="button" class="slider-dot w-8 h-2 rounded-full bg-gray-300 hover:bg-maroon transition-colors" data-index="{{ $index }}"></button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Best Seller Slider -->
|
|
<h3 class="text-2xl font-bold text-maroon my-8 text-center">Best Seller</h3>
|
|
<div id="bestseller-carousel" class="relative w-full" data-carousel="static">
|
|
<div class="relative h-80 overflow-hidden rounded-lg">
|
|
<!-- Slide 1: 4 Card -->
|
|
<div class="hidden duration-700 ease-in-out" data-carousel-item>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 h-full">
|
|
@foreach($bestsellers as $bestseller)
|
|
<div class="bg-white rounded-lg shadow-lg flex flex-col h-full overflow-hidden hover:shadow-xl transition-shadow duration-300">
|
|
<div class="aspect-square w-full bg-gray-100 flex items-center justify-center">
|
|
<img src="{{ asset('storage/bestsellers/' . $bestseller->image) }}" alt="{{ $bestseller->name }}" class="w-full h-full object-cover" />
|
|
</div>
|
|
<div class="p-4 flex-1 flex flex-col">
|
|
<h4 class="text-lg font-semibold text-maroon mb-1">{{ $bestseller->name }}</h4>
|
|
<p class="text-gray-600 text-sm flex-1">{{ $bestseller->description }}</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Slider controls -->
|
|
<button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 group-hover:bg-black/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
|
|
<i class="fas fa-chevron-left text-white"></i>
|
|
<span class="sr-only">Previous</span>
|
|
</span>
|
|
</button>
|
|
<button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 group-hover:bg-black/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
|
|
<i class="fas fa-chevron-right text-white"></i>
|
|
<span class="sr-only">Next</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
@push('styles')
|
|
<!-- Flowbite CSS -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" />
|
|
|
|
<!-- Fancybox CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<!-- Flowbite JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
|
|
|
|
<!-- Fancybox JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
|
|
<script>
|
|
Fancybox.bind("[data-fancybox]", {
|
|
Carousel: {
|
|
infinite: false,
|
|
},
|
|
Thumbs: {
|
|
autoStart: true,
|
|
type: "classic",
|
|
}
|
|
});
|
|
|
|
// Initialize categories slider
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const slider = document.getElementById('categories-slider');
|
|
const prevButton = document.getElementById('prev-button');
|
|
const nextButton = document.getElementById('next-button');
|
|
const dots = document.querySelectorAll('.slider-dot');
|
|
const slideCount = {{ $galleryCategories->chunk(4)->count() }};
|
|
let currentSlide = 0;
|
|
|
|
function updateSlider() {
|
|
slider.style.transform = `translateX(-${currentSlide * 100}%)`;
|
|
dots.forEach((dot, index) => {
|
|
dot.classList.toggle('bg-maroon', index === currentSlide);
|
|
dot.classList.toggle('bg-gray-300', index !== currentSlide);
|
|
});
|
|
}
|
|
|
|
// Set initial state
|
|
updateSlider();
|
|
|
|
// Previous button click
|
|
prevButton.addEventListener('click', () => {
|
|
currentSlide = (currentSlide - 1 + slideCount) % slideCount;
|
|
updateSlider();
|
|
});
|
|
|
|
// Next button click
|
|
nextButton.addEventListener('click', () => {
|
|
currentSlide = (currentSlide + 1) % slideCount;
|
|
updateSlider();
|
|
});
|
|
|
|
// Dot navigation
|
|
dots.forEach((dot, index) => {
|
|
dot.addEventListener('click', () => {
|
|
currentSlide = index;
|
|
updateSlider();
|
|
});
|
|
});
|
|
|
|
// Initialize other carousels
|
|
const carousels = document.querySelectorAll('[data-carousel="static"]');
|
|
carousels.forEach(carousel => {
|
|
new Carousel(carousel, {
|
|
indicators: true,
|
|
interval: 3000
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|
|
|
|
</html>
|