@extends('layout.base')
@section('page-title', $catename)
@section('page-js-script')
    <script>
        $(function() {
            var swiper = new Swiper(".slidePopular", {
                breakpoints: {
                    '320': {
                        slidesPerView: 2,
                    },
                    '576': {
                        slidesPerView: 3,
                    },
                    '1200': {
                        slidesPerView: 6,
                    },
                },
                spaceBetween: 0,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });

        });
    </script>
@endsection

@section('container')
    <x-breadcrumb :breadcrumb="$breadcrumb"></x-breadcrumb>
    <div class="row mt-10">
        <div class="col-12 col-lg-3">
            @include('partial.aside._filter', ['filter_cate' => $filter_cate, 'show_star' => 0])
        </div>
        <div class="col-12 col-lg-9">
            {{-- <h3>{{ $cat_name }}</h3> --}}
            <h1 class="h2 text-b bg-gray rounded-3 mb-10 bg-opacity-25 px-12 py-6">{{ $catename }}</h1>

            @foreach ($catelist as $k => $cl)
                @if (!empty($cl['detail']))
                    @php
                        $slug = str_replace('/', '__', $cl['name']);
                    @endphp
                    <x-title href="{{ route('product', ['cat_name' => $slug]) }}" text="{{ $cl['name'] }}"></x-title>
                    <div class="card mb-20 overflow-hidden py-0 shadow-sm">
                        <div class="row row-cols-3 row-cols-xl-6">
                        @empty($cl['detail'])
                            <div class="w-100 bg-gray bg-opacity-10 py-10 text-center">目前暫無商品</div>
                        @endempty
                        <div class="swiper slidePopular">
                            <div class="swiper-wrapper">
                                @foreach ($cl['detail'] as $k => $v)
                                    <div class="swiper-slide">
                                        @if (!empty($v['preferential_price']))
                                            <x-product-ranking id="{{ $v['id'] }}" name="{{ $v['name'] }}" ranking="{{ $k + 1 }}" img="{{ $v['thumbnail'] ?? asset('image/product_07.png') }}"
                                                price="{{ $v['preferential_price'] }}" discount="{{ $v['discount'] }}" oPrice="{{ $v['retail_price'] }}" coin="{{ $v['coin'] }}" :rating="$v['rating']" :sold="$v['sold']" :hasInv="$v['has_inv']">
                                            </x-product-ranking>
                                        @else
                                            <x-product-ranking id="{{ $v['id'] }}" name="{{ $v['name'] }}" ranking="{{ $k + 1 }}" img="{{ $v['thumbnail'] ?? asset('image/product_07.png') }}"
                                                price="{{ $v['retail_price'] }}" discount="{{ $v['discount'] }}" oPrice="{{ $v['retail_price'] }}" coin="{{ $v['coin'] }}" :rating="$v['rating']" :sold="$v['sold']" :hasInv="$v['has_inv']">
                                            </x-product-ranking>
                                        @endif
                                    </div>
                                @endforeach
                                {{-- @foreach ($popularlist as $k => $pl)
                            <div class="swiper-slide">
                                @if (!empty($pl['preferential_price']))
                                    <x-product-ranking id="{{ $pl['id'] }}" ranking="{{ $k + 1 }}" img="{{ $pl['thumbnail'] ?? asset('image/product_07.png') }}" name="{{ $pl['name'] }}"
                                        price="{{ $pl['preferential_price'] }}" discount="{{ $pl['discount'] }}" oPrice="{{ $pl['retail_price'] }}" coin="90">
                                    </x-product-ranking>
                                @else
                                    <x-product-ranking id="{{ $pl['id'] }}" ranking="{{ $k + 1 }}" img="{{ $pl['thumbnail'] ?? asset('image/product_07.png') }}" name="{{ $pl['name'] }}"
                                        price="{{ $pl['retail_price'] }}" discount="{{ $pl['discount'] }}" oPrice="{{ $pl['retail_price'] }}" coin="90">
                                    </x-product-ranking>
                                @endif
                            </div>
                        @endforeach --}}
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
        {{-- @foreach ($catelist as $k => $cl)
                <x-title text="{{ $cl['name'] }}" href=""></x-title>
                <div class="row row-cols-2 row-cols-md-4 g-2 g-lg-6 mb-20">
                    @foreach ($cl['detail'] as $k => $v)
                        <div class="col">
                            <a href="{{ route('product', ['cat_name' => $v['name']]) }}" class="rounded-2 d-block border bg-white p-6">
                                <img class="w-100" src="{{ $v['thumbnail'] ?? asset('image/categories-b.png') }}" alt="">
                                <p class="mt-3 text-center">{{ $v['name'] }}</p>
                            </a>
                        </div>
                    @endforeach
                </div>
            @endforeach --}}
    </div>
</div>
@endsection