@php
    $wadaplaces = App\Models\WadaPlace::where('status', 'active')->get();
    $groupedByCategory = $wadaplaces->groupBy('category.name');
@endphp

@push('styles')
    <style>
        /* Simple & Clean Design */
        .category-section {
            margin-bottom: 3rem;
        }

        /* Category Header - Simple */
        .category-header {
            border-bottom: 3px solid #e74c3c;
            padding-bottom: 0.75rem;
            margin-bottom: 1.5rem;
            display: inline-block;
        }

        .category-header h3 {
            font-size: 1.75rem;
            font-weight: 600;
            color: #2c3e50;
            margin: 0;
        }

        .category-header .count {
            font-size: 0.9rem;
            color: #7f8c8d;
            font-weight: normal;
            margin-left: 10px;
        }

        /* Simple Card */
        .simple-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
            cursor: pointer;
        }

        .simple-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        /* Image Container - FULL WIDTH FIX */
        .card-img-wrapper {
            width: 100%;
            background: #f0f2f5;
            overflow: hidden;
            position: relative;
        }

        .card-img-wrapper img {
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 10;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }

        .simple-card:hover .card-img-wrapper img {
            transform: scale(1.05);
        }

        /* Card Body */
        .card-body {
            padding: 1rem;
            text-align: center;
        }

        .card-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #2c3e50;
            margin: 0 0 0.5rem 0;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .card-location {
            font-size: 0.85rem;
            color: #7f8c8d;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #f8f9fa;
            padding: 4px 12px;
            border-radius: 20px;
        }

        .card-location i {
            font-size: 0.75rem;
            color: #e74c3c;
        }

        /* Owl Carousel Overrides */
        .heritage-slider .owl-stage {
            display: flex;
        }

        .heritage-slider .owl-item {
            padding: 0 10px;
        }

        .heritage-slider .owl-item .item {
            height: 100%;
        }

        /* Dots Styling */
        .heritage-slider .owl-dots {
            text-align: center;
            margin-top: 20px;
        }

        .heritage-slider .owl-dot {
            width: 8px;
            height: 8px;
            background: #bdc3c7;
            border-radius: 50%;
            display: inline-block;
            margin: 0 4px;
            transition: all 0.3s ease;
        }

        .heritage-slider .owl-dot.active {
            width: 25px;
            background: #e74c3c;
            border-radius: 10px;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 3rem;
            background: #f8f9fa;
            border-radius: 12px;
        }

        .empty-state i {
            font-size: 3rem;
            color: #bdc3c7;
            margin-bottom: 1rem;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .category-header h3 {
                font-size: 1.4rem;
            }

            .card-title {
                font-size: 0.95rem;
            }

        }

        @media (max-width: 576px) {
            .card-body {
                padding: 0.75rem;
            }

            .card-location {
                font-size: 0.75rem;
                padding: 3px 10px;
            }
        }
    </style>
@endpush

<div class="container-fluid py-4">
    <div class="container-fluid">
    @if ($wadaplaces->isNotEmpty())
        @foreach ($groupedByCategory as $categoryName => $places)
            <div class="category-section">
                <!-- Simple Category Header -->
                <div class="category-header">
                    <h3>
                        {{ $categoryName }}

                    </h3>
                </div>

                <!-- Carousel -->
                <div class="position-relative">
                    <div class="owl-carousel heritage-slider owl-carousel-2 carousel-item-4">
                        @foreach ($places as $place)
                            <div class="item">
                                <div class="simple-card">
                                    <!-- Image - Now fills container properly -->
                                    <div class="card-img-wrapper">
                                        <img src="{{ asset($place->image) }}"
                                             alt="{{ $place->name }}"
                                             loading="lazy"
                                             onerror="this.src='{{ asset('images/placeholder.jpg') }}'">
                                    </div>
                                    <div class="card-body">
                                        <h5 class="">{{ $place->name }}</h5>
                                        @if (!empty($place->location))
                                            <div class="card-location">
                                                <i class="fas fa-map-marker-alt"></i>
                                                <span>{{ $place->location }}</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endforeach
    @else
        <div class="empty-state">
            <i class="fas fa-building"></i>
            <h5 class="mt-2">No Places Available</h5>
            <p class="text-muted mb-0">Please check back later.</p>
        </div>
    @endif
    </div>
</div>