@extends('template.main-template')

@section('content')
    <div class="main-content space-80">
        <div class="container">
            <ul class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li class="active">{{ (request('category')) ? Str::title(request('category')) : 'All Products' }}
                </li>
            </ul>
            <div id="secondary" class="widget-area col-xs-12 col-md-3">
                <aside class="widget widget_product_categories">

                    {{-- @foreach ($globalproductAttr as $attr)
                        <h3 class="widget-title">{{ $attr->title }}</h3>
                        @switch($attr->type)
                            @case('color')
                                @component('template.components.filters.colors', ['variation' => $attr, 'options' => $attr->options])
                                @endcomponent
                            @break

                            @case('select')
                                @component('template.components.filters.select', ['variation' => $attr, 'options' => $attr->options])
                                @endcomponent
                            @break

                            @default
                        @endswitch
                    @endforeach --}}

                    <h3 class="widget-title">Categories</h3>
                    <ul class="product-categories">
                        @foreach ($globalCategories as $categories)
                            <li>
                                <a href="{{ route('product.all') }}?category={{ $categories->category_slug }}"
                                    title="{{ $categories->category_title }}">
                                    {{ $categories->category_title }}
                                </a>
                                @if ($categories->childs != null)
                                    <ul class="children">
                                        @foreach ($categories->childs as $child)
                                            <li>
                                                <a href="{{ route('product.all') }}?category={{ $child->category_slug }}"
                                                    title="{{ $child->category_title }}">{{ $child->category_title }}</a>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif
                            </li>
                        @endforeach
                        <!-- <li><a href="{{ route('product.all') }}" title="All Product">All Products</a></li> -->
                    </ul>

                </aside>
                <aside class="widget">
                    <h3 class="widget-title">Shop by</h3>
                </aside>

                @foreach ($globalproductAttr as $attr)
                    <aside class="widget widget_subcategory">
                        <h4>{{ $attr->title }}</h4>
                        @switch($attr->type)
                            @case('color')
                                {{-- <li><a href="#." style="background:#958170;"></a></li> --}}
                                @component('template.components.filters.colors', ['variation' => $attr, 'options' => $attr->options])
                                @endcomponent
                            @break

                            @case('select')
                                @component('template.components.filters.select', ['variation' => $attr, 'options' => $attr->options])
                                @endcomponent
                            @break

                            @default
                        @endswitch
                    </aside>
                @endforeach
            </div>
            <!-- End Secondary -->
            <div id="primary" class="col-xs-12 col-md-9">
                @if (count($products) > 0 && request('category'))
                    <div class="banner-grid col-md-12">
                        <img src="{{ asset( ($category->category_image !== 'a') ? $category->category_image : $category->parent->category_image) }}" alt="Banner {{ $category->category_title }}">
                    </div>
                @endif

                <!-- End ordering -->
                <div class="products grid_full grid_sidebar">

                    @forelse ($products as $product)
                        @component('template.components.products.product_loop', ['product' => $product])
                        @endcomponent
                    @empty
                    <div class="alert alert-warning">
                        No products found
                    </div>
                    @endforelse
                    @csrf

                </div>

            </div>
            <!-- End Primary -->
        </div>
        <!-- End conainer -->
    </div>
@endsection

@push('javascript')
    <script src="{{ asset('shop/js/cart.js') }}"></script>
    <script>
        function addProduct(id) {
            cart.addToCart(id)
        }

        function handleFilter(filter_name, value) {
            // Desmarca todos os checkbox com o mesmo nome
            let options = document.querySelectorAll('input[name="' + filter_name + '"]')

            for (let i in options) {
                options[i].checked = 0
            }

            let querystring = window.location.search
            let urlParams = new URLSearchParams(querystring)

            if (urlParams.has(filter_name)) {

                if (urlParams.get(filter_name) === value) {
                    urlParams.delete(filter_name)
                } else {
                    urlParams.set(filter_name, value)
                }
            } else {
                urlParams.append(filter_name, value)
            }

            for (let i in options) {
                if (options[i] instanceof HTMLElement) {
                    console.log(options[i])
                    let attrValue = options[i].getAttribute('data-value')

                    if (attrValue === value) {
                        options[i].checked = 1
                    }
                }
            }

            let newParameters = urlParams.toString()

            window.location.href = "{{ Request::url() }}?" + newParameters

            return true
        }

        function isDOM(obj) {
            var tag = obj.tagName;
            try {
                obj.tagName = ''; // Read-only for DOM, should throw exception
                obj.tagName = tag; // Restore for normal objects
                return false;
            } catch (e) {
                return true;
            }
        }
    </script>
@endpush