@extends('template.main-template')

@section('content')

<div class="container margin_30">
    <div class="row">
        <aside class="col-lg-3" id="sidebar_fixed">
            <div class="filter_col">
                <div class="inner_bt"><a href="#" class="open_filters"><i class="ti-close"></i></a></div>
                <div class="filter_type version_2">
                    <h4><a href="" data-bs-toggle="collapse" class="opened">Categories</a></h4>
                    <div class="collapse show" id="filter_1">
                        <ul>
                            @foreach ($globalCategories as $categories)
                                <li>
                                    <a href="{{ route('product.all') }}?category={{ $categories->category_slug }}" class="container_check">
                                        {{ $categories->category_title }}
                                    </a>
                                </li>
                            @endforeach
                            <li>
                                <a class="container_check" href="{{ route('product.all') }}">ALL PRODUCTS</a>
                            </li>

                        </ul>
                    </div>
                    <!-- /filter_type -->
                </div>

            </div>
        </aside>
        <!-- /col -->
        <div class="col-lg-9">
            <div class="top_banner">
                <div class="opacity-mask d-flex align-items-center" data-opacity-mask="rgba(0, 0, 0, 0.3)">
                    <div class="container pl-lg-5">
                        {{-- <div class="breadcrumbs">
                            <ul>
                                <li><a href="#">Home</a></li>
                                <li><a href="#">Products</a></li>
                            </ul>
                        </div> --}}
                        <h1>{{ (request('category')) ? $category->category_title : 'All Products' }}</h1>
                    </div>
                </div>
                <div style="background-color: #d5d5d7; background-position: right; background-size: contain; background-image: url({{asset( ($category && $category->category_image !== 'a') ? $category->category_image : 'template/img/categories/all-products.jpg')}}); background-repeat: no-repeat; flex: 1; height: 100%"></div>
                {{-- <img style="width: 70%;" src="{{ asset( ($category && $category->category_image !== 'a') ? $category->category_image : 'template/img/bg_cat_shoes.jpg') }}" class="img-fluid" alt=""> --}}
            </div>
            <!-- /top_banner -->
            <div id="stick_here"></div>
            <div class="toolbox elemento_stick add_bottom_30">

            </div>
            <!-- /toolbox -->
           <div class="row small-gutters">

            @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>
        <!-- /col -->
    </div>
    <!-- /row -->
</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

@push('css')
    <link href="{{asset('template/css/listing.css')}}" rel="stylesheet">
@endpush