@extends('layout.base')
@section('page-title', $cat_name)
@section('page-js-script')
    <script>
        $(function() {

            $('#stock_sorting').change(function(e) {
                e.preventDefault();
                window.location.href = '{!! $order_opt['url'] !!}&' + this.value;
            });
        });
    </script>
@endsection
@section('container')
    <div class="row mt-10">
        <div class="col-12 col-lg-3">
            @include('partial.aside._filter', ['filter_cate' => $filter_cate, 'show_star' => 0])
        </div>
        @php
            $slug = str_replace('/', '__', $cat_name);
        @endphp
        <div class="col-12 col-lg-9">
            <h1 class="h2">{{ $cat_name }}</h1>
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link {{ empty($cat_name3) ? 'active' : '' }}" href="{{ route('product', ['cat_name' => $slug]) }}" aria-current="page">All</a>
                </li>
                @foreach ($catelist as $cl)
                    @php
                        $cate3 = str_replace('/', '__', $cl['name']);
                    @endphp
                    <li class="nav-item">
                        <a class="nav-link {{ $cl['name'] == $cat_name3 ? 'active' : '' }}" href="{{ route('product', ['cat_name' => $slug, 'cat_name3' => $cate3]) }}">{{ $cl['name'] }}</a>
                    </li>
                @endforeach
                {{-- <li class="nav-item">
                    <a class="nav-link" href="#">AAA</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">BBB</a>
                </li> --}}
            </ul>
            <div class="d-flex justify-content-between align-items-center my-2">
                {{-- <p>24 Products found</p> --}}
                <p>
                    {{ $total }} Products found
                </p>
                {{-- <div class="btn-group">
                    <button class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-expanded="false">
                        {{ __('basic.Sort') }}
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">價格 高至低</a></li>
                        <li><a class="dropdown-item" href="#">價格 低至高</a></li>
                        <li><a class="dropdown-item" href="#">評價 高至低</a></li>
                        <li><a class="dropdown-item" href="#">評價 低至高</a></li>

                    </ul>
                </div> --}}

                <select class="form-select" id="stock_sorting" aria-label="" style="width: fit-content;">
                    <option value="">{{ __('basic.Sort') }}</option>
                    @foreach ($order_opt['option'] as $opt)
                        <option value="{{ $opt['value'] }}" @if ($opt['value'] == $order_opt['value']) selected @endif>{{ $opt['name'] }}</option>
                    @endforeach

                </select>
            </div>
            <div class="row row-cols-2 row-cols-md-4 g-2 g-lg-6 mb-10">
                @foreach ($stocklist as $v)
                    @if (!empty($v['preferential_price']))
                        <x-product-sale id="{{ $v['id'] }}" name="{{ $v['name'] }}" 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-sale>
                    @else
                        <x-product-default id="{{ $v['id'] }}" name="{{ $v['name'] }}" img="{{ $v['thumbnail'] ?? asset('image/product_07.png') }}" price="{{ $v['retail_price'] }}" coin="{{ $v['coin'] }}" :rating="$v['rating']"
                            :sold="$v['sold']" :hasInv="$v['has_inv']">
                        </x-product-default>
                    @endif
                @endforeach
            </div>
            @include('partial._pagination', $paginate)

        </div>
    </div>
@endsection