@extends('layout.base')
@section('page-title', __('robot.Search') . ': ' . $keyword)
@section('page-js-script')
    <script>
        $(function() {
            $('#filter-open').click(function() {
                $('#filter,#filter-open').toggleClass('show');
                $('#filter-open i').toggleClass('icon-arrow-right icon-arrow-left');
            });

            $('#stock_sorting').change(function(e) {
                e.preventDefault();
                window.location.href = '{!! $order_opt['url'] !!}&' + this.value;
            });
            $("#search_keyword").val($('#text_keyword').text());
            // $('.product-name').removeClass('fs-8');
            $('.product-card-info').css('min-height', $('.product_sale .product-card-info').css('height'));
            $('#stock_sorting').change(function(e) {
                e.preventDefault();
                console.log(("{!! $order_opt['url'] !!}"));
                window.location.href = '{!! $order_opt['url'] !!}' + this.value;
            });
            $('#filter_price').click(function(e) {
                e.preventDefault();
                let url = "{!! $price_opt['url'] !!}";
                if ($('#min_price').val().length > 0) {
                    url += '&min_price=' + $('#min_price').val();
                }
                if ($('#max_price').val().length > 0) {
                    url += '&max_price=' + $('#max_price').val();
                }
                window.location.href = url;


            });
        });
    </script>
@endsection
@section('container')
    @empty($keyword)
        <div class="row pt-5" style="min-height: 50vh">
            <h3>請輸入關鍵字</h3>
        </div>
    @endempty
    @if (!empty($keyword))
        <div class="row mt-10">
            <div class="col-lg-3 col-12">
                <div class="l-store__filter" id="filter">
                    <div class="card flex-shrink-0 p-3">
                        <div>
                            @isset($cate_opt)
                                <div class="accordion l-product__accordion" id="accordionExample">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="heading_search">
                                            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapse_search" type="button" aria-expanded="ture" aria-controls="collapse_search">
                                                <h5 class="m-0">

                                                    {{ __('robot.Category') }}
                                                </h5>
                                            </button>
                                        </h2>
                                        <div class="accordion-collapse show collapse" id="collapse_search" data-bs-parent="#accordionExample" aria-labelledby="heading_search">
                                            <div class="accordion-body">
                                                <a class="@if ($cate_opt['choose'] == '') fw-bold text-primary @endif" href="{{ $cate_opt['url'] }}">{{ __('basic.All') }}</a>
                                                @foreach ($cate_opt['option'] as $k => $ca)
                                                    @php
                                                        $slug = str_replace('/', '__', $ca['name']);
                                                    @endphp

                                                    <a class="@if ($ca['name'] == $cate_opt['choose']) fw-bold text-primary @endif" href="{{ $cate_opt['url'] . '&cate=' . $ca['name'] . '&tree_level=' . $ca['tree_level'] }}">{{ $ca['name'] }}</a>
                                                @endforeach

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endisset
                        </div>
                        <div class="py-4">
                            <h5 class="mb-3">{{ __('basic.Price') }}</h5>
                            <div>
                                <input class="form-control" id="min_price" type="number" value="{{ $price_opt['min_price'] ?? '' }}" placeholder="{{ __('robot.MinPrice') }}">
                                ～
                                <input class="form-control" id="max_price" type="number" value="{{ $price_opt['max_price'] ?? '' }}" placeholder="{{ __('robot.MaxPrice') }}">
                                <button class="btn btn-sm btn-primary mt-2" id="filter_price" type="button">{{ __('robot.Filter') }}</button>
                            </div>
                        </div>


                    </div>
                    <div class="l-store__filter-open" id="filter-open"><i class="icon-arrow-right"></i></div>
                </div>


            </div>
            <div class="col-lg-9 col-12">
                <div class="d-flex justify-content-between my-2">
                    <h6>'<span class="text-primary" id="text_keyword">{{ $keyword }}</span>'搜尋結果</h6>
                    <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 gy-6 mb-30">
                    @foreach ($stocklist as $k => $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'] }}" frame="0" :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>
    @endif
@endsection