@extends('template.main-template')

@section('content')
    <div class="custom-hero"></div>

    <!-- Products -->
    <section class="shop-page padding-top-100 padding-bottom-100">
        <div class="container">
            <div class="row">

                <!-- Shop SideBar -->
                <div class="col-sm-12 col-md-3 col-lg-3">
                    <div class="shop-sidebar">

                        <!-- Category -->
                        <h5 class="shop-tittle margin-bottom-30" data-toggle="collapse" href="#collapse-category" role="button" aria-expanded="false" aria-controls="collapse-category">category</h5>
                        <div class="collapse" id="collapse-category">
                            <ul class="shop-cate">
                                @foreach ($globalCategories as $categories)
                                    <li>
                                        <a href="{{ route('product.all') }}?category={{ $categories->category_slug }}">
                                            {{ $categories->category_title }} <span></span>
                                        </a>
                                    </li>
                                    @if ($categories->childs)
                                        @foreach ($categories->childs as $child)
                                            <li style="margin-left: 15px">
                                                <a href="{{ route('product.all') }}?category={{ $child->category_slug }}">
                                                    {{ $child->category_title }}
                                                </a>
                                            </li>
                                        @endforeach
                                    @endif
                                @endforeach

                            </ul>
                        </div>

                        @foreach ($globalproductAttr as $attr)
                            <h5 class="shop-tittle margin-top-20 margin-bottom-30" data-toggle="collapse" href="#collapse-attr-{{Str::slug($attr->title)}}" role="button" aria-expanded="false" aria-controls="collapse-category">{{ $attr->title }}</h5>
                            @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
                        @endforeach
                    </div>
                </div>

                <!-- Item Content -->
                <div class="col-sm-12 col-md-9 col-lg-9">
                    <div class="item-display">

                    </div>

                    <!-- Popular Item Slide -->
                    <div class="papular-block row single-img-demos">
                        @foreach ($products as $key => $product)
                        <div class="col-md-4 col-sm-12" style="min-height: 450px!important;">
                            @component('template.components.products.product_loop', ['product' => $product])
                            @endcomponent
                        </div>
                        @endforeach
                        @csrf
                    </div>
                </div>
            </div>
            {{-- Paginação manual sem Bootstrap --}}
            @if ($products->lastPage() > 1)
                <div class="pagination-container" style="text-align:center; margin-top:20px;">
                    <ul class="pagination-list" style="list-style:none; display:inline-flex; padding:0; margin:0;">
                        <li style="margin:0 5px;">
                            <a href="{{ $products->url(1) }}" style="padding:5px 10px; text-decoration:none;{{ $products->currentPage() == 1 ? ' color:#ccc; pointer-events:none;' : '' }}">«</a>
                        </li>
                        <li style="margin:0 5px;">
                            <a href="{{ $products->previousPageUrl() }}" style="padding:5px 10px; text-decoration:none;{{ !$products->previousPageUrl() ? ' color:#ccc; pointer-events:none;' : '' }}">‹</a>
                        </li>
                        @for ($page = 1; $page <= $products->lastPage(); $page++)
                            <li style="margin:0 5px;">
                                <a href="{{ $products->url($page) }}" style="padding:5px 10px; text-decoration:none;{{ $products->currentPage() == $page ? ' font-weight:bold; text-decoration:underline;' : '' }}">{{ $page }}</a>
                            </li>
                        @endfor
                        <li style="margin:0 5px;">
                            <a href="{{ $products->nextPageUrl() }}" style="padding:5px 10px; text-decoration:none;{{ !$products->nextPageUrl() ? ' color:#ccc; pointer-events:none;' : '' }}">›</a>
                        </li>
                        <li style="margin:0 5px;">
                            <a href="{{ $products->url($products->lastPage()) }}" style="padding:5px 10px; text-decoration:none;{{ $products->currentPage() == $products->lastPage() ? ' color:#ccc; pointer-events:none;' : '' }}">»</a>
                        </li>
                    </ul>
                </div>
            @endif
        </div>
    </section>
@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